Question

如何将所有文字和图像稍微向下移动以使其居中，而不用将边框向下移动？

我尝试了相对定位每个项目，但边框一直向下移动并超出父容器的高度。

以下是代码（我正在使用BBC网站上的旧页面并尝试将其复制以供学习）：

    <head>
        <meta charset="utf-8">
        <title>Technology - BBC News </title>

        <style>

        body {
            margin:0;
            padding:0;
        }

        #topbar{
            width:1000px;
            height: 40px;
            margin: 0 auto;
            background-color: red;

        }


        #topbar-menu li {
            list-style-type: none;
            float:left;
            border-left: 1px solid grey;
            height: 40px;
            padding: 0 10px 0 10px;
            font-weight: bold;

        }




        </style>

    </head>

    <body>

        <div id="topbar">

            <ul id="topbar-menu">
                <li><img src="images/bbc-logo.png"></li>
                <li id="signin-text">Sign in</li>
                <li><img src="images/bell.png"></li>
                <li>Sport</li>
                <li>Weather</li>
                <li>TV</li>
                <li>Radio</li>
                <li>CBBC</li>
                <li>More</li>
                <li> <input type="text" value ="Search"> </li>
            </ul>

        </div>










    </body>

Answer 1

我建议使用line-height属性。例如，请参见下面的屏幕截图。

Answer 2

不需要＆lt; div id =“topbar”＆gt; ，因为 ul 将作为容器使用。从那里，您可以使用 ul 设置为灵活容器CSS_Flexible_Box_Layout / Using_CSS_flexible_boxes“rel =”nofollow noreferrer“> Flexbox 布局。

＆＃xA;＆＃xA;

您还应重新考虑使用固定尺寸，因为它们只能正确显示在固定的视口大小。

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

  body {＆＃xD;＆＃xA;保证金：0;＆＃的xD;＆＃XA;填充：0;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; #topbar-menu {＆＃xD;＆＃xA;显示：弯曲;＆＃的xD;＆＃XA;证明内容：中心;＆＃的xD;＆＃XA;余量：0; ＆＃的xD;＆＃XA;填充：0;＆＃的xD;＆＃XA;背景：红色;＆＃的xD;＆＃XA;文本对齐：中心; ＆＃的xD;＆＃XA;身高：3em; / *继承字体大小的300％* /＆＃xD;＆＃xA;最小宽度：900px; / *从不小于900px宽，无论视口宽度* /＆＃xD;＆＃xA; margin：0 auto;＆＃xD;＆＃xA;背景颜色：红色; ＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA;＃topbar-menu li {＆＃xD;＆＃xA; list-style-type：none;＆＃xD;＆＃xA; border-left：1px纯灰色;＆＃xD;＆＃xA;填充：1em; / *这是使内容垂直对齐的原因* /＆＃xD;＆＃xA; font-weight：bold;＆＃xD;＆＃xA;}

＆＃xD;＆＃xA;

 <代码>＆lt; ul id =“topbar-menu”＆gt;＆＃xD;＆＃xA; ＆lt; li＆gt;＆lt; img src =“images / bbc-logo.png”＆gt;＆lt; / li＆gt;＆＃xD;＆＃xA; ＆lt; li id =“signin-text”＆gt;登录＆lt; / li＆gt;＆＃xD;＆＃xA; ＆lt; li＆gt;＆lt; img src =“images / bell.png”＆gt;＆lt; / li＆gt;＆＃xD;＆＃xA; ＆LT;李＆GT;运动＆LT; /立GT;＆＃的xD;＆＃XA; ＆LT;李＆GT;天气及LT; /立GT;＆＃的xD;＆＃XA; ＆LT;李＆GT; TV＆LT; /立GT;＆＃的xD;＆＃XA; ＆LT;李＆GT;广播LT; /立GT;＆＃的xD;＆＃XA; ＆LT;李＆GT;牛熊＆LT; /立GT;＆＃的xD;＆＃XA; ＆LT;李＆GT;详情＆lt; /立GT;＆＃的xD;＆＃XA; ＆LT;李＆GT; ＆lt; input type =“text”value =“搜索”＆gt; ＆LT; /立GT;＆＃的xD;＆＃XA;＆LT; / UL＆GT;

＆＃的xD;＆＃XA;

＆＃XA;

Answer 3

试试这个。这将使内容垂直对齐。

#topbar-menu li{
  display: flex;
  align-items: center;
}

Answer 4

尝试line-height: 100%;

这应该让文本垂直居中

如何在不移动边框的情况下向下移动所有文本

4 个答案: