Question

我有一个p标签，我希望在图像旁边垂直对齐。我遇到的问题是只有第一行文本是垂直对齐的。怎么做我得到p标签中的文本以包裹在图像旁边并保持垂直对齐？

HTML

<body>
  <div class="blog">
    <div class="post">
      <img src="https://dummyimage.com/600x400/a3b5c4/000000.jpg&text=example+of+donation+feed">
      <p>“Once someone dreams a dream, it can't just drop out of existence. But if the dreamer can't remember it, what becomes of it? It lives on in Fantastica, deep under earth. There are forgotten dreams stored in many layers. The deeper one digs, the closer they are. All Fantastica rests on a foundation of forgotten dreams.”</p>
    </div>
  </div>
</body>

CSS

<style>
.blog img {
  vertical-align: middle;
}

.blog p {
  display: inline;
}
</style>

Answer 1

父母的{p> display: flex;和align-items: center垂直居中的内容。

.post {
  display: flex;
  align-items: center;
}

<div class="blog">
    <div class="post">
      <img src="https://dummyimage.com/600x400/a3b5c4/000000.jpg&text=example+of+donation+feed">
      <p>“Once someone dreams a dream, it can't just drop out of existence. But if the dreamer can't remember it, what becomes of it? It lives on in Fantastica, deep under earth. There are forgotten dreams stored in many layers. The deeper one digs, the closer they are. All Fantastica rests on a foundation of forgotten dreams.”</p>
    </div>
  </div>

Answer 2

CSS代码应该是：

function validatePhone(inputtxt) {
 var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
 return phoneno.test(inputtxt)
 }

 function formAlert() {
  alert_string = '';
 var userName = document.getElementById('first_name').value;
 var userLastName = document.getElementById('last_name').value;
 var phoneno =  document.getElementById('phone_num').value;
 if(userName === "" || userName === null){
 alert("Please enter name");
 }
 if(userLastName === "" || userLastName === null){
 alert("Please enter lastname");
 }
else if(!validatePhone(phoneno)){ alert("Please enter 10 digits for phone  number"); }

else{
alert_string += userName + " ";
alert_string += userLastName + " ";
alert_string += phoneno;
alert(alert_string);
 } 
}

Answer 3

如果我理解了这个要求，你想要整个段落与你的图像相邻吗？

最简单的解决方案是使用CSS table属性。请注意，这不意味着使用表格。相反，它只是显示元素。

以下是一些示例CSS

div.blog {
    display: table;
}
div.blog>img {
    display: table-cell;
}
div.blog>p {
    display: table-cell;
}

第一个属性中的display:table并非严格必要，但默认值为display:table-row，这样可以减少对大小调整的控制。

垂直对齐图像旁边的p标签

3 个答案: