Question

这是完整的剥离代码。任何人都可以看到为什么图像和文本不会对齐？有什么想法吗？

Question edited

这是完整的剥离代码。任何人都可以看到为什么图像和文本不会对齐？有什么想法吗？

这是完整的剥离代码。任何人都可以看到为什么图像和文本不会对齐？有任何想法吗？

＆＃13;

body {
  font-family: 'Roboto', sans-serif;
  color: #fff;
}

img {
  max-width: 100%;
  border-radius: 15px 15px;
}

.about {
  background-color: #2c0242;
  padding: 30px;
  vertical-align: middle;
  margin-top: 20px;
  display: inline-block;
}

h2, p, img {
  display: inline-block;
  margin: 0px;
  vertical-align: middle;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>BMS</title>
  <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,400italic' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="customise.css">
</head>

<body>
  <div class="about">
    <h2>About Us</h2>
    <p>Blah blah blah.</p>
    <img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" alt="bikedark" class="icondetails">
  </div>
  <!--all other content contained in comment-->
</body>
</html>

＆＃13;

Answer 1

简单的方法是使它们全部显示（h1，p）：inline-block;

或者你可以添加float：left;到h1和p

我也将它们对齐在中间，删除它只需删除vertical-align：middle;

＆＃13;

img {
  max-width: 100%;
  border-radius: 15px 15px;
}
.about {
  background-color: #2c0242;
  padding: 30px;
  vertical-align: middle;
  margin-top: 20px;
  display: inline-block;  
}
h2, p, img {
  display: inline-block;
  margin: 0px;
  vertical-align: middle;
}

＆＃13;

<div class="about">
  <h2>Title</h2>
  <p>text</p>
  <img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" alt="">
</div>

＆＃13;

Answer 2

需要将图像右移，h2 p左右清除

文字和图像并排

2 个答案: