Question

我正在尝试创建一个使文本居中的效果，但是在文本的两边都有一个图像，看起来像这样

|                    |
|        text[image] |
| [image]text        |
|                    |

我希望文本相对于div居中，但我想使图像位于文本的任一侧。我该如何实现？这是我的HTML和CSS现在：

<div class="text-container">
  <h1 class="text">text1</h1><span class="image"><img src="image.svg"></span>
</div> 

text-container {
    text-align: center;
}
text {
    display: inline;
}

与此相关的问题是image也被视为内联元素，因此整个结构（而不只是文本）都居中。我该如何解决？

Answer 1

您好，这是您的图片文字旁边的代码：

HTML：

<link 
 href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" 
    rel="stylesheet" id="bootstrap-css">
<script 
   src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"> 
</script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
   <!------ Include the above in your HEAD tag ---------->

   <div class="container">
    <div class="row">
      <h2>Some Title</h2>
     </div>

 <div class="block">
      <div class="row">
      <div class="span4">
          <img class="img-left" src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg"/>
        <div class="content-heading"><h3>Experience &nbsp </h3></div>
          <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
     <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem 
    malesuada magna mollis euismod. Donec sed odio dui.</p>
    <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
     </div>
  </div>
<br/>
  <div class="row">
    <div class="span4">
     <img class="img-right" src="http://www.prelovac.com/vladimir/wp- 
  content/uploads/2008/03/example.jpg"/>
     <div class="content-heading"><h3>Experience &nbsp </h3></div>
     <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
      <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
   </div>
   </div>
  </div>
 </div>

CSS：

 .span4 img {
  margin-right: 10px;
 }
 .span4 .img-left {
 float: left;
 }
 .span4 .img-right {
 float: right;
 }

Answer 2

如果display:flex在文本之前，请使用padding-right并设置img

.text-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

img{
width:50px;
height:50px;
}
.p-right{
 padding-right: 110px;
}

<div class="text-container">
  <div>
    <h1 >text1</h1>
  </div>
  <div>
     <img src="https://i.stack.imgur.com/3mG2d.jpg" />
  </div>
 
</div> 
<div class="text-container p-right">

  <div>
     <img src="https://i.stack.imgur.com/3mG2d.jpg" />
  </div>
   <div>
    <h1 >text1</h1>
  </div>
</div> 

<div class="text-container">
  <div>
    <h1 >text1</h1>
  </div>
  <div>
     <img src="https://i.stack.imgur.com/3mG2d.jpg" />
  </div>
 
</div> 
<div class="text-container p-right">

  <div>
     <img src="https://i.stack.imgur.com/3mG2d.jpg" />
  </div>
   <div>
    <h1 >text1</h1>
  </div>
</div>

如何相对于文本定位图像？

2 个答案: