题

如何在包含内部对齐图像div？

例

在我的例子,我需要垂直居中的<img>在<div>用class ="frame":

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frame高度固定,图像高度未知..frame如果这是唯一的解决方案,我可以添加新元素.我试图在IE≥7,Webkit,Gecko上做到这一点.

在这里查看jsfiddle

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center;
    margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img …

我div有一套display:block.(90px height和width)我里面有一些文字.

我需要文本在垂直和水平方向上对齐.

我试过了text-align:center,但它不做水平部分,所以我试过vertical-align:middle但它没有用.

有任何想法吗？

我有一个div有两个图像和一个h1.所有这些都需要在div内垂直对齐,彼此相邻.

其中一个图像需要absolute放在div中.

在所有常见浏览器上工作所需的CSS是什么？

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>

如何使用flexbox在容器中水平和垂直居中div.在下面的例子中,我希望每个数字彼此相同(在行中),它​​们是水平居中的.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>

http://codepen.io/anon/pen/zLxBo

我有一些容器,他们的孩子只是绝对/相对定位.如何设置容器高度,让他们的孩子在他们里面？

这是代码:

HTML

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="one"></div>
        <div class="two"></div>
    </article>
</section>    

<div style="clear:both">Clear won't do.</div>
<!-- I want to have a gap between sections here -->

<section id="bar">
    <header>bar</header>
    <article>
        <div class="one"></div><div></div>
        <div class="two"></div>
    </article>
</section>  

CSS

article {
    position: relative;
}

.one {
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: absolute;
    top: 10px;
    right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

这是一个jsfiddle.我希望"条形"文本出现在4个方格之间,而不是它们之后.

http://jsfiddle.net/Ht9Qy/

任何简单的修复？

请注意,我不知道这些孩子的身高,我不能设置身高:容器的xxx.

我有一个div将有这个CSS:

#some_kind_of_popup
{
    position: fixed;
    top: 100px;
    min-height: 300px;
    width: 90%;
    max-width: 900px;
}

现在,我怎样才能使这个div居中？我可以使用margin-left: -450px; left: 50%;但这仅在屏幕> 900像素时才有效.之后(当窗口<900像素时),它将不再居中.

我当然可以用某种js来做这件事,但是用CSS做"更正确"吗？

通常情况下,您使用图像居中display: block; margin: auto,但如果图像大于容器,则它会向右溢出.如何让它同样溢出到双方？容器的宽度是固定的并且是已知的.图像的宽度未知.

如果我有一个固定大小的容器div和一个未知大小的图像,我该如何水平和垂直居中？

• 使用纯css
• 如果css无法使用JQuery

这个答案对固定宽度图像有意义,但不是可变宽度图像.

像这样的结构(我想到项目渲染器类似于列表中的这些,但左侧的图像并不总是相同的大小:

<ul id="gallery">
    <li id="galleryItem1">
        <div class="imageContainer">
            <img src="gallery/image1"/>
        </div>
        <p>Some text to the right...</p>
        <!-- more stuff -->
    </li>
    <li id="galleryItem2">
    <!-- ... -->
</ul>

谢谢您的帮助!

我试图垂直居中两个<p>元素.

我按照phrogz.net上的教程进行了操作,但仍然将元素放在div上方,在div下面,在div中顶部对齐.

我会尝试其他的东西,但这里的大多数问题只是回到那个教程.

此代码段用于网页顶部的横幅广告.

.banner {
  width: 980px;
  height: 69px;
  background-image: url(../images/nav-bg.jpg);
  background-repeat: no-repeat;
  /* color: #ffffff; */
}

.bannerleft {
  float: left;
  width: 420px;
  text-align: right;
  height: 652px;
  line-height: 52px;
  font-size: 28px;
  padding-right: 5px;
}

.bannerright {
  float: right;
  width: 555px;
  text-align: left;
  position: relative;
}

.bannerrightinner {
  position: absolute;
  top: 50%;
  height: 52px;
  margin-top: -26px;
}

<div class="banner">
  <div class="bannerleft">
    I am vertically centered
  </div>
  <div class="bannerright">
    <div class="bannerrightinner">
      <p>I should be</p> …

可能重复:
如何在较大的div内制作图像中心(垂直和水平)

HTML代码:

<div class="promo_tumbs col_12">
    <div class="promo_tumb"></div>
    <div class="promo_tumb"></div>
    <div class="promo_tumb"></div>
    <div class="promo_tumb"></div>
    <div class="promo_tumb"></div>
</div>

CSS部分:

.promo_tumbs {
    height: 155px;
    background: #058;
}
.promo_tumb {
    height: 75px;
    width: 125px;
    background: #990000;
    float: left;
    margin: 0 10px;
    text-align: center;
}

我怎样才能垂直居中.promo_tumb？