html - 在同一个 div 中以不同方式对齐图像和文本

Question

如何将图像左对齐(圆点样式)并将文本居中对齐？ 这是他们的样子:

<div class="col-sm-6">
  <img src="{{ asset(assetsPath ~ '/path/to/image.png') }}">
  TEX TEXT TEXT TEXT TEXT TEXT TEXT
</div>

<div class="col-sm-6">
  <img src="{{ asset(assetsPath ~ '/path/to/image.png') }}">
  TEXT TEXT TEXT TEXT
</div>

现在，div 有 text-align: left 显然图像和文本都在左边，但我希望它们位于 div 的中心，图像完美对齐垂直。

Answer 1

你可以像这样尝试垂直对齐，但你必须将文本包裹在一个跨度中:

<div class="col-sm-6">
  <img src="{{ asset(assetsPath ~ '/path/to/image.png') }}">
  <span>TEX TEXT TEXT TEXT TEXT TEXT TEXT</span>
</div>

<div class="col-sm-6">
  <img src="{{ asset(assetsPath ~ '/path/to/image.png') }}">
  <span>TEXT TEXT TEXT TEXT<span>
</div>

img, span{
   vertical-align:middle;
}

好吧，我认为您只需要垂直对齐。试试这个:

更新后的答案:

<div id="wrap">
  <div class="col-sm-6">
    <img src="http://www.tevel.cn/en/images/apple/dot.png"> 
    <span>TEX TEXT TEXT TEXT TEXT TEXT TEXT</span>
  </div>
  <div class="col-sm-6">
    <img src="http://www.tevel.cn/en/images/apple/dot.png"> 
    <span>TEX TEXT TEXTT</span>
  </div>
</div>

img{
  margin-right:5px;
  margin-top:3px;
}
#wrap{
  text-align:center;
}
div{
  clear:both;
  margin-left:30px;
}
img, span{
  float:left;
}

更新后的答案，以便元素始终水平放置在容器的中间:

<div id="wrap">
    <div id="innerWrap">
        <div class="col-sm-6">
            <img src="{{ asset(assetsPath ~ '/path/to/image.png') }}"> 
            <span>TEX TEXT TEXT TEXT TEXT TEXT TEXT</span>
        </div>
        <div class="col-sm-6">
            <img src="{{ asset(assetsPath ~ '/path/to/image.png') }}"> 
            <span>TEX TEXT TEXTT</span>
        </div>                
    </div>
</div>

    #wrap{
    text-align:center;
    }
    #innerWrap{
        display:inline-block;
    }
    img,span{
        vertical-align:middle;
    }
    .col-sm-6{
        text-align: left;
    }