Question

我是css的新手，我正在尝试如何创建一个googe登陆页面，这是我正在进行的课程的一部分，我开始在导航栏上，即使我已经使用了内联块，文本是仍然在文本行下面而不在其中心，我的代码是这样的：

<!DOCTYPE html>
<html>
<head>
<title>Google Homepage</title>
<style type="text/css">



    .navigation {
        width: 400;
        text-align: right;
    }

    .navigation ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
         overflow: hidden;
    }

    .navigation li {

        display:inline-block;
        text-decoration:none; 
    }

    .navigation ul li a {  
    text-decoration:none; 
    padding:0 12px;
    }

    .navigation  #profile-image {
        text-align: center;
        height: 50px;
        border-radius: 50%;
    }
</style>
</head>
<body>

<div class="navigation">

<ul>
    <li style="margin: 5px auto;"> Glendon Philipp </li>
    <li> <a href="#news"> Gmail </a>    </li>
    <li> <a href="#contact"> <img src="img/google-button.jpeg"> </a>    </li>
    <li> <a href="#about"> <img src="img/google-button-notification.jpg"> </a> </li>
    <li> <a href="#profile-image"> <img id="profile-image" src="img/profile.jpg"> </a></li>
</ul>

</div>

</body>
</html>

Answer 1

这里你去：

browser

这会将文字与图像的垂直中间对齐。您需要调整边距和填充。

这里是小提琴：https://jsfiddle.net/s04o30ya/

Answer 2

这对你好吗？

See this fiddle

.navigation ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     text-align: center;
     overflow: hidden;
}

顺便说一句，这是不正确的：

.navigation {
    width: 400;
    text-align: right;
}

您必须添加宽度值，例如：

.navigation {
    width: 400px;
    text-align: right;
}

如何在导航栏中居中文本行？

2 个答案: