Question

我正在尝试将此徽标和文字排在同一行，但网站左侧有徽标，文本居中。现在看来它是什么样的，到目前为止CSS和HTML是什么。

What the site looks like now

这是我目前的代码：

#title {
  font-family: sans-serif;
  text-align: center;
  color: #E03DA7;
  vertical-align: top;
  display: inline;
  align-content: right;
}
body {
  align-content: center;
  vertical-align: top;
  margin: 0;
  width: 100%;
  height: 100%;
}
#navbar {
  font-family: monospace;
  font-size: 25px;
  text-align: center
}
#mainpara {
  text-align: left;
  max-width: 300px;
  max-height: 750px;
  font-size: 20px;
  vertical-align: middle;
  font-family: sans-serif
}
img {
  max-width: 100px
}

<img src="WOW_logo_RGB.jpg">
<h1 id="title">Welcome, to WOW Virtual.</h1>
<h3 id="navbar">About Us | Live Radar | Why Join?</h3>

<p id="mainpara">Welcome to WOW Virtual, a fresh new Virtual Airline for the Flight Simulator community. We offer only the best for our pilots, and strive to maintain the best service for any of our pilots. Interested? Join Today!</p>

Answer 1

您可以使用Flexbox

获得所需的结果

如果您在容器中包含img和h1（例如header），请将以下CSS添加到header代码

header { 
  display: flex; 
  align-items: center; /* align vertical */ 
 }

可以在此处找到结果，修改后的代码为：JSFiddle

Answer 2

将文本和图片放在一个div中，文本对齐居中。然后，如果你希望div位于中心，你可以将div本身居中。

Answer 3

更多的是一种hackish方式，您可以将img和h1放入带有.header类的div中。

然后将line-height的{{1}}设置为图像的高度：

div

您可以看到输出here。

Answer 4

这很简单：

＆＃13;

#title, img {
    vertical-align: middle;
}
#title {
    display: inline;
}

＆＃13;

<img src="https://placeimg.com/60/60/tech">
<h1 id="title">Welcome, to WOW Virtual.</h1>
<h3 id="navbar">About Us | Live Radar | Why Join?</h3>

＆＃13;

修改：如果您希望文本居中，则必须采取另一种方法：

＆＃13;

#header {
    position: relative;
}
h1 {
    line-height: 60px;
    text-align: center;
}
#header img {
    position: absolute;
    height: 60px;
}
#navbar {
    text-align: center;
}

＆＃13;

<div id="header">
    <img src="https://placeimg.com/60/60/tech">
    <h1>Welcome, to WOW Virtual.</h1>
</div>
<h3 id="navbar">About Us | Live Radar | Why Join?</h3>

＆＃13;

在position:absolute标记上使用img，可确保h1标记的中心位于页面的整个宽度。

Answer 5

通常使用表格标记，您可以为表格单元格中间应用垂直对齐属性。

如果您想为div使用相同的属性/行为。然后使用display:table-row到您的父（.header），然后显示：table-cell到徽标和文本周围的子div。

这将允许您使用vertical-align:middle。通过复制初始代码段来检查编辑。如果您有任何疑问，请告诉我

＆＃13;

.header{
  display:table-row;
}
.header > div{
display:table-cell;
  vertical-align:middle;
}
#title {
  font-family: sans-serif;
  text-align: center;
  color: #E03DA7;
  vertical-align: top;
  display: inline;
  align-content: right;
}
body {
  align-content: center;
  vertical-align: top;
  margin: 0;
  width: 100%;
  height: 100%;
}
#navbar {
  font-family: monospace;
  font-size: 25px;
  text-align: center
}
#mainpara {
  text-align: left;
  max-width: 300px;
  max-height: 750px;
  font-size: 20px;
  vertical-align: middle;
  font-family: sans-serif
}
img {
  max-width: 100px
}

＆＃13;

<html>

<body>
  <div class="header">
    <div>
      <img width="250" height="250" src="WOW_logo_RGB.jpg">
    </div>
    <div>
      <h1 id="title">Welcome, to WOW Virtual.</h1>
    </div>
  </div>
  <h3 id="navbar">About Us | Live Radar | Why Join?</h3>

  <p id="mainpara">Welcome to WOW Virtual, a fresh new Virtual Airline for the Flight Simulator community. We offer only the best for our pilots, and strive to maintain the best service for any of our pilots. Interested? Join Today!</p>
</body>

</html>

＆＃13;

如何让我的文本与我的图像在同一条线上居中？

5 个答案: