Question

我想达到这个效果

基本上，我希望图像和文本都以图像为中心，左边是文本，右边是文本。图像和文本都是构成自己行的更大div的一部分。只要达到这种效果，img或text是否是其自身div的一部分并不重要。

最好在不使用flex的情况下完成此操作，我认为这是解决间距和位置问题的常用方法。但是，我已经阅读了关于这种技术的负面信息，所以我宁愿只是安全地使用它而不是使用它。

帮助太棒了，谢谢

Answer 1

如果使用display flex，这非常简单。
然后，您可以将justify-content属性设置为居中。

.parent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* The following is optional, to add space between image and text */

.parent div {
  margin: 0 5px;
}

<div class="parent">
  <div><img src=" http://fillmurray.com/200/200"/></div>
  <div><p>Text for fun!!</p></div>
</div>

Answer 2

我也有同样的问题。我想实现图像和文本的中心对齐，并使用我在这个小提琴中使用的技术来解决它。检查这个小提琴

<div style="background-color:black;color:white;padding:20px;    display: flex;">
 <div style="color:white;overflow:hidden;width: 50%;height: 100px;">
 <img src="http://placehold.it/350x150" style="     margin-right: 10px;    float: right;   width: 75%;">

</div> 
<div style="color:white;/* padding:20px; */width: 50%;height: 100px;">
<h2 style="    margin-left: 10px;">This is text</h2>
</div> 
</div>

https://jsfiddle.net/Lpjxse6L/

Answer 3

如果您不想使用displa：flex，那么使用可以试试这个

.container{
  float:left;
  position:relative;
  left:50%;
  -webkit-transform:translateX(-50%);
  -moz-transform:translateX(-50%);
  -ms-transform:translateX(-50%);
  transform:translateX(-50%);
}

.section{
  float:left;
  margin:0 10px;
  padding:10px;
  border:1px solid #000;
}

.wrapper {
    background: #fbfbfb;
    border: 1px solid #000;
    float: left;
    width: 100%;
    padding: 10px 0;
}

<div class="wrapper">
  <div class="container">
    <img src=" http://fillmurray.com/200/200" class="section"/>
    <div class="section"><p>Text for fun!!</p></div>
  </div>
</div>

Answer 4

你可以试试这个..

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row" style="border: 2px solid; text-align: center;">
  <div class="col-sm-3">
    <h3>Parent Div</h3>
  </div>
  <div class="col-sm-3" style="border: 2px solid; margin: 14px;">
    <h3>Div of image</h3>
  </div>
  <div class="col-sm-3" style="border: 2px solid; margin: 14px;">
    <h3>Div of text</h3>
  </div>
  <div class="col-sm-3">
  </div>
</div>

</body>
</html>

Answer 5

以下是我的所作所为，看看您是否理解，或者您有任何疑问。 http://codepen.io/anon/pen/RKppYd

<div class="container">
  <div class="images"><img class="top" src="http://placehold.it/350x150"></div>
  <div class="text">some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably. </div>
</div>



.container {
  text-align:center;

}
.top {
  vertical-align: text-top;
}
.images {
display:inline-block;
}
.text {
  display:inline-block;
  vertical-align: text-top;
  width:350px;
  background-color: black;
  color:white;
}

css - 中心img +文本，文本格式为

5 个答案: