Question

如果DIV中的所有文本都使用Justify？

，如何使图像居中

-------------------
texttexttexttext
texttexttexttext
[图像]
texttexttexttext
texttexttexttext
--------------------

<div style="text-align:justify;">
    texttex text te txtetext texttex text te txtetexttexttex text te txtetext texttex text te txtetext texttex text te txtetext  texttex text te txtetexttexttex text te txtetext texttex text te txtetext <img src="image.jpg"> texttex text te txtetexttexttex texttex text te txtetexttexttex.
</div>

Answer 1

希望它能帮到你

 <div style="text-align:center;">
   <p style="text-align:justify;">texttex text te txtetext texttex text te
   txtetexttexttex text te txtetext texttex text te       txtetext texttex text 
   te txtetext    texttex text te txtetexttexttex text te txtetext texttex
   te    txtetext</p>

 <img src="image.jpg">

   <p style="text-align:justify;" >texttex text te txtetexttexttex texttex
   text te txtetexttexttex.</p>
 </div>

Answer 2

您可以按照以下方式执行此操作。

img {
    display: block;
    margin: 0 auto;
    text-align: center;
    width: auto;
}

<强> WORKING DEMO

Answer 3

将您的HTML更改为：

<div id="image-div" style="text-align:justify;">
    text...<img src="image.jpg"/> text...
</div>

然后在你的CSS中添加如下内容：

#image-div img{   
    display:block;
    margin:0 auto;
}

DEMO

或使用段落标记（<p>）并将您的HTML设为：

<div style="text-align:center;">
    <p style="text-align:justify;">texttex text te txtetext texttex text te txtetexttexttex text te txtetext texttex text te txtetext texttex text te txtetext texttex text te txtetexttexttex text te txtetext texttex text te txtetext</p>
    <img src="image.jpg" />
    <p style="text-align:justify;">texttex text te txtetexttexttex texttex text te txtetexttexttex.</p>
</div>

DEMO

Answer 4

您在寻找this吗？

<强> HTML

<div class "text_img">texttex text te txtetext texttex text te txtetexttexttex text te txtetext texttex text te txtetext texttex text te txtetext texttex text te txtetexttexttex text te txtetext texttex text te txtetext
    <img src="http://www.hollywoodreporter.com/sites/default/files/2012/12/img_logo_blue.jpg">texttex text te txtetexttexttex texttex text te txtetexttexttex.</div>

<强> CSS

.text_img {
    text-align: justify;
}
.text_img img {
    margin 0px auto;
    display: block;
}

使用对齐DIV时居中的图像

4 个答案: