0

我正在尝试制作一个带有 2 张图像和这些图像之间的文本的顶部栏。但我无法将文本居中。我正在为移动设备做这件事。

这是我的html

<img src="1.jpg" />
Company Name
<img src="2.jpg" />

我尝试了下面的代码但没有用。我无法将文本居中

<div style="float:left"><img src="1.jpg" /></div>
<div>Company Name</div>
<div style="float:right"><img src="2.jpg" /></div>        
<div style="clear:both"/></div>

图像显示正确，但如何将图像之间的文本居中？我不能使用

谢谢

4

2 回答 2

1

尝试将所有 div 向左浮动并将它们的宽度设为 33.3%，然后使用 text-alind 定位它们的内容，因为我看到 div 中的所有内容都是内联内容

<div style="float:left; width: 33.3%;"><img src="1.jpg" /></div>
<div style="text-align:center; float:left; width: 33.3%;">Company Name</div>
<div style="text-align: right; float:left; width: 33.3%;"><img src="2.jpg" /></div>        
<div style="clear:both/></div>

这是示例：http: //jsfiddle.net/Lj4wK/

于 2013-06-12T08:25:16.267 回答
0

好的，您可以在这里使用经典的媒体对象布局方法。这个 CSS 也可以重用。

看看这个例子 - http://jsfiddle.net/tL4eW/

将您的 HTML 更改为这样。居中文本元素之前的两个图像。

<div class="header">
  <img class="obj-left" src="img1.png" width="50" height="50"/>
  <img class="obj-right" src="img2.png" width="50" height="50"/>
  <div class="obj-middle"><p class="txt-center">This text should be all centered</p></div>
</div>

CSS 非常简单：

.obj-left {
    float:left;
}

.obj-right {
    float:right;
}

.obj-media {
    overflow:hidden;
}

.txt-center {
    text-align: center;
}

这回答了你的问题了吗？

于 2013-06-12T08:37:32.337 回答