主页 / coding / 问题 / 79092108
Accepted
Raheel Khan
Asked: 2024-10-16 08:24:29 +0800 CST

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

  • 772

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

呈现的页面

徽标与标题高度相同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

1 个回答

  1. Best Answer

    * {
  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的默认 CSS 属性( ) 转换为。接下来，将属性设置为。然后将父元素（标签）的和都清零，这样当您将宽度和高度设置为 100% 时，它们将完全一样（没有多余的像素或未考虑的空白）。最后，删除元素上的内联样式。除非您指定属性行为，否则内容需要适合您尝试垂直对齐的内容，否则它将向上或向下移动。显示或通常可以让您到达大部分位置。<a>*inline-blockvertical-alignmiddlepaddingmargin<a>height.Logooverflowblockinline-block

    • 1

相关问题