DIV 元素内从左到右内容的垂直对齐

问题描述 投票：0回答：1

我不是前端开发人员，我正在尝试创建一个非常简单的页面骨架，目前如下所示：

Rendered page

徽标与标题高度相同

div
，右侧的所有内容都是纯文本。我想将单词 
SYNGERY technology partners
对齐到垂直中间。我也不知道如果未来的内容比标题高会发生什么。

我有一种感觉，使用简单的后续 

span
元素不是正确的方法。有没有更好的方法来构建它？我不想为此创建一个完整的图像。

我也宁愿远离绝对定位，除非这是推荐的做法。

标题周围有一个 

5px
边框 
div
以便澄清，我已尽可能简化了 HTML/CSS。

<!DOCTYPE html>

<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet" />
</head>
<body>

    <div id="DivMain">

        <div id="DivHeader" style="border: 5px solid red;">

            <a href="Index.html">
                <img src="Assets/Brand/Logo.png" style="width: 80px; height: 80px;" />
                &nbsp;
                <span class="Logo" style="height: 100px;">SYNERGY</span>
                &nbsp;
                <span>TECHNOLOGY PARTNERS</span>
            </a>

        </div>

        <div id="DivMenu"><a id="AnchorMenuIndex" href="Index.html">HOME</a></div>
        <div id="DivBody"><h1>HOME</h1></div>
        <div id="DivFooter"><a href="Contact.html">CONTACT</a></div>

    </div>

</body>
</html>

<style type="text/css">
    * { margin: 0px; padding: 0px; }
    body { height: 100%; max-height: 100vh; font-family: Arial, Helvetica, sans-serif; border-color: black; background-color: white; }
    a { color: #0E2841; text-decoration: none; }
    div { text-align: justify; }

    #DivHeader
    {
        height: 80px;
        color: white;
        background-color: #0E2841;
        vertical-align: middle; /* This is perhaps the problem? */
    }
    #DivHeader a { color: white; }

    #DivMain { background-color: white; }
    #DivMenu { }
    #DivBody { }
    #DivFooter { }

    .Logo { font-family: "Gugi", sans-serif; font-weight: 400; font-style: normal; font-size: 36px; }
</style>

我环顾四周，找了各种办法，都没有找到我能理解的东西。任何指示将不胜感激。

html css alignment vertical-alignment
1个回答
0
投票

* {
  margin: 0px;
  padding: 0px;
}
body {
  height: 100%;
  max-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  border-color: black;
  background-color: white;
}
a {
  color: #0e2841;
  text-decoration: none;
}
div {
  text-align: justify;
}

#DivHeader {
  height: 80px;
  color: white;
  background-color: #0e2841;
}
#DivHeader a {
  color: white;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#DivHeader a * {
  color: white;
  display: inline-block;
  vertical-align: middle;
}

#DivMain {
  background-color: white;
}
#DivMenu {
}
#DivBody {
}
#DivFooter {
}

.Logo {
  font-family: "Gugi", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 36px;
}
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet" />
</head>
<body>

    <div id="DivMain">

        <div id="DivHeader" style="border: 5px solid red;">

            <a href="Index.html">
                <img src="Assets/Brand/Logo.png" style="width: 80px; height: 80px;" />
                &nbsp;
                <span class="Logo">SYNERGY</span>
                &nbsp;
                <span>TECHNOLOGY PARTNERS</span>
            </a>

        </div>

        <div id="DivMenu"><a id="AnchorMenuIndex" href="Index.html">HOME</a></div>
        <div id="DivBody"><h1>HOME</h1></div>
        <div id="DivFooter"><a href="Contact.html">CONTACT</a></div>

    </div>

</body>
</html>

要使用普通 CSS 解决此问题，首先需要将 

display
元素的子元素 (
<a>
) 的默认 
*
CSS 属性转换为 
inline-block
。 接下来，将 
vertical-align
属性设置为 
middle
。然后将填充和边距归零，这样当您将宽度和高度设置为 100% 时，它就会准确无误（没有额外的像素或数学）。 最后，删除 
.Logo
元素上的内联高度样式。 需要修复您尝试垂直对齐的内部内容。 显示 
block
或 
inline-block
通常可以帮助您实现目标。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.