html - 如何通过标题文本获得图片

Question

我有一些文本，我想在它的左边显示一个小图片，然后在文本的右边显示一个小图片，但我不确定如何做到这一点并使其响应，以便它当屏幕变小时，所有的东西都会一起收缩。

我正在使用 bootstrap 3，到目前为止我有:

HTML:

    #restaurant-menu img {
        width: 100px;
        display:inline-block;
        vertical-align:top;
    }
    
    .border {
        display: block;
        height: 2px;
        margin-top: 30px;
        margin-bottom: 30px;
        width: 78px;
        background: #F8BD23;
        margin: 0 auto;
    }
     h1 {
     
        font-weight: 200;
        font-size: 65px;
        letter-spacing: 0px;
        line-height: 50px;
        color: black;
        padding-top: 20px;
        margin-bottom: 3px;
        text-align: center;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="left">
        <img class="img-responsive" src="img/g.png" style="margin: auto;">
    </div>
    <div class="mid">
        <h1>Priserna</h1>
        <span class="border"></span>
        <p style="text-align: center;margin-top: 15px;">Nedan hittar du alla våra tjänster vi har att erbjuda</p>
    </div>
    <div class="right">
        <img class="img-responsive" src="img/g.png" style="margin: auto;">
    </div>

任何帮助使 2 个图像出现在文本的左侧和右侧都会很棒，

谢谢

Answer 1

将您的 div 包裹在容器 (此处为 flex-container) 中，并为其赋予 display:flex 属性，如下所示:

.flex-container {
  display: flex;  /*Generates a flexbox layout with default flex direction as row */
  width: 100%; /* Not really required */
  align-items: center; /*Aligns contents vertically */
  justify-content: center; /*Aligns contents horizontally */
  text-align: center; /*Aligns further text in the center */
}

#restaurant-menu img {
  width: 100px;
  display: inline-block;
  vertical-align: top;
}

.border {
  display: block;
  height: 2px;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 78px;
  background: #F8BD23;
  margin: 0 auto;
}

h1 {
  font-weight: 200;
  font-size: 65px;
  letter-spacing: 0px;
  line-height: 50px;
  color: black;
  padding-top: 20px;
  margin-bottom: 3px;
  text-align: center;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="flex-container">
  <div class="left">
    <img class="img-responsive" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" style="margin: auto;">
  </div>
  <div class="mid">
    <h1>Priserna</h1>
    <span class="border"></span>
    <p style="text-align: center;margin-top: 15px;">Nedan hittar du alla våra tjänster vi har att erbjuda</p>
  </div>
  <div class="right">
    <img class="img-responsive" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" style="margin: auto;">
  </div>
</div>