相关疑难解决方法(0)

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

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

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

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

我试图简单地使用DIV水平和垂直居中文本并将显示类型显示为表格单元格,但它在IE8或Firefox中都不起作用.

下面是我正在使用的CSS,这就是html页面中的所有内容.

@charset "utf-8";
/* CSS Document */
html, body
{
    background-color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 5px;
}
div.Main
{
    background-color:#FFFFFF;
    border-collapse:collapse;
    width:800px;
    margin-left:auto;
    margin-right:auto;
}
div.MainHeader
{
    color:#C00000;
    font-size:18pt;
    font-weight:bold;
    text-align:center;
    width:800px;
}
div.BlackBox
{
    background-color:#000000;
    color:#FFFF00;
    display:table-cell;
    float:left;
    font-size:18pt;
    font-weight:bold;
    height:191px;
    text-align:center;
    vertical-align:middle;
    width:630px;
}
div.BlackBoxPicture
{
    background-color:#000000;
    float:right;
    height:191px;
    margin-top:auto;
    margin-bottom:auto;
    text-align:right;
    vertical-align:bottom;
    width:170px;
}

我究竟做错了什么？

我有一个类似灯箱项目的以下HTML.

<div id="lightbox">
  <img id="image" src="" />
</div>

使用以下CSS:

#lightbox{
display:none;
position:fixed;
width:100%;
text-align:center;
z-index:600;
cursor:pointer;
left:0;
top:100px;
}

#image{
position:relative;
height:600px;
border:1px solid grey;
}

为了使图像始终在水平中心,我只是在包装div上使用text-align:center,所以我100%确定它是正确的.

我遇到了垂直居中的问题,我使用的方法是简单地设置#lightbox属性中的顶部值.

正如您所看到的,图像的高度是已知的,因此在jQuery中很容易实现,但我正在寻找一个纯CSS解决方案.

有任何想法吗？谢谢.

我有一个布局,图像在某个区域内"浮动".布局如下所示:

像这样的来源:

<div class="free_tile">
  <a class="img_container canonical" href="/photos/10">
    <img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile">
    <!-- EDIT: I am aware that I can put the badge here. See the edit notes and image below. -->
  </a>
  <div class="location">Houston</div>
  <div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>

CSS看起来像这样(在SCSS中):

div.free_tile { width: 176px; height: 206px; float: left; margin: 0 20px 20px 0; position: relative;
  &.last { margin: 0 0 20px 0; }
  a.img_container { display: block; width: 176px; height: 158px; text-align: center; line-height: 156px; …

我想使用CSS在元素中间对齐一些文本.这是我的标记:

<div id="testimonial">
    <span class="quote">Some random text that spans two lines</span>
</div>

和相关的CSS:

#testimonial {
    background: url('images/testimonial.png') no-repeat;
    width: 898px;
    height: 138px;
    margin: 0 auto;
    margin-top: 10px;
    text-align: center;
    padding: 0px 30px 0px 30px;
}

.quote {
    font-size: 32px;
    font-family: "Times New Roman", Verdanna, Arial, sans-serif;
    vertical-align: middle;
    font-style: italic;
    color: #676767;
    text-shadow: 1px 1px #e7e7e7;
}

通常要进入.quote垂直中间#testimonial,我会这样做:

.quote { line-height: 138px; }

但这会打破布局,因为文本.quote跨越多行.

正如你所看到的,我已经尝试过这样做vertical-align: middle;,但也无效.

任何帮助表示赞赏.干杯.

我有以下HTML代码:

<div style="border: 3px coral solid;width:400px;height:400px;background:#D4D0C8;">
    <img style="max-width:400px;max-height:400px;" src="myImage.jpg">
</div>

使用这些样式时,宽度> 400像素的图像会调整大小,但仍保留在div的顶部.有没有办法垂直居中？

我通常会使用绝对定位并将顶部设置为50%,使用负边距 - 顶部(儿童高度的一半)垂直居中.在这种情况下,由于子元素的高度会有所不同,因此无效.

那么有没有办法在div中垂直居中div而不知道孩子的身高？