如何在图像前面对齐文本

时间:2018-09-18 13:05:21

标签: css css3

这是我的代码:

with open(my_file) as f:
    for line in f:
        ...
.left-ul {
  margin-left: 10px!important;
  display: inline-block!important;
  vertical-align: top;
  width: 350px;
}

.iconic {
  padding: 2%!important;
  color: #111!important;
  font-size: 16px!important;
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
}

我想显示文字:

  

行业专家担任教员和客座讲师

在图像的前面,我的文字在图像的下面。

我无法在图像前面对齐文本。两者都应该面对面。
我试过使用text-align属性,但这没用。

如果您需要更多文件,请告诉我。

1 个答案:

答案 0 :(得分:0)

您可以将float: right;应用于图像:

.left-ul {
  margin-left: 10px!important;
  display: inline-block!important;
  vertical-align: top;
  width: 350px;
}

.iconic {
  padding: 2%!important;
  color: #111!important;
  font-size: 16px!important;
}
.left-ul > img {
  float: right;
}
<div id="news">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4 text-center">
        <img src="images/prof.jpg" style="width:90%;">
      </div>
      <div class="col-md-8 price-grid feature-list">
        <legend>
          <h2>Highlights of the Program</h2>
        </legend>
        <ul class="left-ul">
          <img src="images/thumb.png" style="width:55px; height:55px;">
          <li class="iconic">Industry experts as faculty and guest lecturers</li>
        </ul>
      </div>
    </div>
  </div>
</div>