1

我无法将图像居中,div因为它是向左浮动的。我尝试过文本对齐并设置边距。

CSS:

.to_left_690 {
    width: 690px;
    float: left;    
}
.to_left_290 {
    width: 290px;
    float: left;
    overflow: hidden;
    text-align: center;
}
p {
    margin: 0 0 14px 0px;
    text-align: justify;
}
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

HTML:

<div class="to_left_690">

<h3>Date Center</h3>

    <p>One of the biggest` data centers in Latin America with over 3000 servers took a proactive approach to monitor their electrical infrastructure. Over 4 years later they have still not had any major disruptions.</p>

<h3>Call Center</h3>

    <p>
        <img class="alignleft size-full wp-image-181" alt="baloons" src="http://www.sheerdigitaltest.net/janus/wp-content/uploads/2013/07/baloons.png" width="62" height="70">During Carnival 2013 the data center air conditioning failed for a call centre company and no-one on site. Thanks to early detection and alerts sent to the standby maintenance team they were quickly able to resolve the situation and prevent a catastrophic shutdown.</p>

<h3>Facilities Management:</h3>

    <p><span>With over 1200 people working at headquarters the TJES needed a solution to maintain proper working conditions to be able to perform with the minimum of disruption. Janus Technology solutions have eliminated all problems and saved millions in lost productivity over 2 years</span>
    </p>
</div>
<div class="to_left_290">
    <img class="size-full wp-image-183 aligncenter" alt="ipad" src="http://www.sheerdigitaltest.net/janus/wp-content/uploads/2013/07/ipad.png" width="290" height="368">fdsfdsfdsfds</div>

JSFIddle:http: //jsfiddle.net/xLwSh/

4

4 回答 4

2

将此添加到浮动 div 上的类中:

text-align: center;
width: 100%;

它现在不在 div 中居中,因为浮动 div 的大小与其内容的宽度相同,您在 div 上设置了固定宽度,因此 img 在您给它的 290px 内居中,因此 div 不会占用整个屏幕宽度

于 2013-07-20T18:14:49.497 回答
0

如果您的问题是关于将图像相对于页面居中。原因是你有包装.to_left_290 div width: 290px;。因为图像被包裹在一个固定的容器中,float:left你不能指望它在页面的中心对齐。包装类需要 100% 的宽度。

不确定您是否需要图像包装器的固定宽度和浮动对齐,但如果您这样做,那么您不能让图像对齐页面的中心。如果您可以更改该部分,那么您可以执行此操作。

将图像包装的宽度更改.to_left_290为 100%。但是,将 100% 的宽度添加到浮动 div 消除了具有浮动 div 的需要。如果您仍然希望您的 div 向左浮动并具有固定宽度,则不能将其居中。

您唯一能做的就是摆脱包装器 div 上的固定宽度。像这样:

.to_left_290 {
    width: 100%;
    float: left;
    overflow: hidden;
    text-align: center;
    display:block;
}

工作小提琴:http: //jsfiddle.net/gjmvY/1/

于 2013-07-20T18:14:02.907 回答
0

这就是你想要的?小提琴

只需添加此 CSS 规则:

.to_left_290 {
    width: 100%; /* Instead of 290px */
    text-align: center;
}

顺便说一句,您必须tex-align在“容器”元素中使用属性,而不是在子元素中(遵循 CSS 规则而不是居中内部img

.to_left_290 > img {
   text-align: center;
}

因为您要告诉该img元素内的内容居中。

于 2013-07-20T18:11:35.573 回答
0

在另一个 div 中设置图像并display:inline在图像样式中使用。

于 2013-07-20T18:02:55.513 回答