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>

现在，divs有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;
    }

Answer 2

如果你正在使用bootstrap（我想是这样），这应该适合你：

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

  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
      <img src="{{ asset(assetsPath ~ '/path/to/image.png') }}">
    </div>
    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
      TEX TEXT TEXT TEXT TEXT TEXT TEXT
    </div>
  </div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"></div>

工作示例：http://www.bootply.com/RqjSoFQEOU

Bootstrap网格文档：http://getbootstrap.com/css/#grid

如果你不使用bootstrap，你可以这样做：

<div style="text-align: left; width: 400px; margin-right: auto; margin-left: auto;">
  <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>

工作示例：https://jsfiddle.net/jqg7s839/1/

如果你想使用带引导程序的第二个解决方案，你应该删除col-sm-6类，这两个类都将在一行中。（6 + 6 = 12）读取bootstraps网格文档以获取更多信息。：）

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

2 个答案: