HTML标题将内容对齐到中心

Question

＆＃13;

＆＃13;

<h4 class="modal-title" id="PublishTitle" style="vertical-align: central;"><img id="PublishTitleImage" style="width:35px; height:35px; border-radius: 6px;" src="" /> bla bla</h4>

＆＃13;

＆＃13;

＆＃13;

所以我希望图像和文本都垂直对齐到中心，但它似乎不起作用，两者都对齐到顶部。

我读到了vertical-align：central;假设工作，但没有？

Answer 1

两件事：

• vertical-align的值为middle，而不是center（绝对不是central）
• 您需要将此设置为图像，而不是标题

＆＃13;

＆＃13;

img {
  width:35px; 
  height:35px; 
  vertical-align: middle;
}

＆＃13;

<h4 class="modal-title" id="PublishTitle"><img id="PublishTitleImage" src="" /> bla bla</h4>

＆＃13;

＆＃13;

＆＃13;

Answer 2

  

试试这个CSS

＆＃13;

＆＃13;

.modal-title{position:absolute;top:40%;left:0;right:0;display:table;margin:0 auto}

＆＃13;

<h4 class="modal-title" id="PublishTitle" style="vertical-align: central;"><img id="PublishTitleImage" style="width:35px; height:35px; border-radius: 6px;" src="" /> bla bla</h4>

＆＃13;

＆＃13;

＆＃13;