Question

我有一个div，我必须在其中放置一个图标和一些文字，然后排列整个东西，使它们一起保持中心对齐（两者之间有一个小的间隙）图像和文字）。问题是，文本长度可能会有所不同。因此，如果它是一个像利比亚这样的短文本，那么整个元素都会蜷缩在靠近中心的位置，而如果它是一个像波斯尼亚和黑塞哥维那这样的大文本，它将会散布开来（虽然仍然居中），图像靠近左侧。我试过这个：

<div class='container'>
  <div class='imagetext'>
    <img class='location-icon' src="http://images.clipartpanda.com/blue-location-icon-Location-Icon-Blue.png" />
    <span class='location-text'>
        Bosnia and Herzigovina
    </span>
  </div>
</div>

CSS：

.container {
  width: 260px;
  height: 298px;
  background: yellow;
}

.imagetext {
  width: 100%;
  height: 20px;
  background: green;
  position: relative;
  top: 50px;
  text-align: center;
}

.location-icon {
  width: 20px;
  display: inline-block;
  margin-right: 5px;
  float: left;
}

.location-text {
  font-size: 12px;
  display: inline-block;
  float: left;
  position: relative;
  top: 5px;
}

body {
  background: white;
  font-family: sans-serif;
}

这是小提琴 - https://jsfiddle.net/d8t9e0p6/3/。即使将text-align设置为center，我也无法将其置于中心位置。如何实现正确的中心对齐？

Answer 1

首先，正如JoostS所说，摆脱你的top:5px; 然后，您将有一个未对齐的文本字符串。要解决此问题，请删除.location_text上的vertical-align:middle顶部，并将.location-icon添加到.container { width: 260px; height: 298px; background: yellow; } .imagetext { width: 100%; height: 20px; background: green; position: relative; top: 50px; text-align: center; } .location-icon { vertical-align:middle; width: 20px; display: inline-block; margin-right: 5px; } .location-text { font-size: 12px; display: inline-block; position: relative; } body { background: white; font-family: sans-serif; }

＆＃13;

<div class='container'>
  <div class='imagetext'>
    <img class='location-icon' src="http://images.clipartpanda.com/blue-location-icon-Location-Icon-Blue.png" />
    <span class='location-text'>
        Bosnia and Herzigovina
    </span>
  </div>
</div>

＆＃13;

.container {
  width: 260px;
  height: 298px;
  background: yellow;
}

.imagetext {
  width: 100%;
  height: 20px;
  background: green;
  position: relative;
  top: 50px;
  text-align: center;
  font-size: 12px;
}

.imagetext::before{
  display:inline-block;
  content:'';
  background-image:url(http://images.clipartpanda.com/blue-location-icon-Location-Icon-Blue.png);
  background-size:contain;
  width:20px;
  height:20px;
  background-repeat:no-repeat;
  vertical-align:middle;
  margin-right:5px;
}

body {
  background: white;
  font-family: sans-serif;
}

＆＃13;

已更新以添加：

如果使用伪元素，也可以大幅减少标记：

＆＃13;

<div class='container'>
  <div class='imagetext'>
    Bosnia and Herzigovina
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

Answer 2

我更新了https://jsfiddle.net/d8t9e0p6/4/

你必须在容器上放置文本对齐中心，并且imagetext容器需要width auto并显示inline-block;

.container {
  width: 260px;
  height: 298px;
  background: yellow;
  text-align:center;
}

.imagetext {
  width:auto;
  height: 20px;
  background: green;
  position: relative;
  top: 50px;
  text-align: center;
  display:inline-block;
}

Answer 3

删除float:left css语句。

水平对齐文本和图像，文本长度可以变化

3 个答案: