Css 左对齐文本中居中的图像

Css 左对齐文本中居中的图像,css,image,text,block,Css,Image,Text,Block,我希望内联(显示在同一行上),但在左对齐文本块中居中的图像 请看这里: 我可以只使用CSS(而不使用HTML)吗 我尝试过“文本对齐:居中”和“边距:0自动”都没有用 提前谢谢 如果您可以编辑HTML: 我将图像包装在另一个div中,并通过text align属性将其内容居中对齐 HTML: <div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ni

我希望内联(显示在同一行上),但在左对齐文本块中居中的图像

请看这里:

我可以只使用CSS(而不使用HTML)吗

我尝试过“文本对齐:居中”和“边距:0自动”都没有用


提前谢谢

如果您可以编辑HTML:
我将图像包装在另一个div中,并通过text align属性将其内容居中对齐

HTML:

<div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
     <div class="fish">
        <img src=http://i.imgur.com/innn2oL.gif />
        <img src=http://i.imgur.com/zRYKaCM.jpg />
    </div>
</div>
 .fish{
    width:100%;
    text-align:center;
 }

如果无法编辑HTML:
您有两个选择:

  • 考虑通过Javascript注入父div(.fish)并使用 方法同上
  • 给第一个图像留一些左边距,以推动图像 通过第n个*psuedo类朝向中心,如下所示。这不是一个精确的定心,而是一个工作循环

    .extra img:nth-of-type(1){
         margin-left:20%;
     }
    

  • *并非所有浏览器都支持第n种类型

    要将图像居中吗?如果图像是内联的,如何居中?我想你想要内联块或内联块;您可以将它们包装在父元素中,使其成为块,然后将图像居中放置在该父块元素中。如果您可以控制HTML。从你使用

    的外观来看,这似乎是你无论如何都想做的事情。从OP的小提琴来看,这似乎是他/她无论如何都想做的事情。将图像居中
    内联
    是没有意义的。那怎么行呢?我想我误用了“内联”;我只想让他们出现在同一行。我无法控制HTML,这就是为什么添加父div不起作用的原因。还有其他建议吗,或者仅仅通过CSS是不可能做到这一点的?不过谢谢你的建议:)我明白了。我已经更新了我的帖子。请看一下,看看它是否解决了您的问题。谢谢。我没有访问Javascript的权限。添加一个百分比并不完美(例如,在一张图像的情况下,与两张或五张图像相比),但它确实使图像更接近中心。我现在就用这个,酷。如果可以指定.extra div的宽度和/或插入的图像,则可以非常接近绝对中心(只要每篇文章的图像数量相同)。
    
    .extra img:nth-of-type(1){
         margin-left:20%;
     }