Question

嗨，我想让我的文字在div中ul的li中心但是无论我做什么我都无法解决

我找不到问题

这是我的html代码

  <div class="col-md-3 offset-2">

    <div class="btn-group btn-group-toggle" id="filterCategory" data-toggle="buttons">
      <label class="btn btn-lg btn-outline-success active">
        <input type="radio" name="options" autocomplete="off" checked>New
      </label>
      <label class="btn btn-lg btn-outline-success">
        <input type="radio" name="options" autocomplete="off">
        <img src="assets/fire.png" width="22" height="auto" alt="bookmarked">
      </label>
      <label class="btn btn-lg btn-outline-success" *ngIf="isVerified">
        <input type="radio" name="options" autocomplete="off">
        <img src="assets/bookmark.png" width="22" height="auto" alt="bookmarked">
      </label>
    </div>

  </div>

这是我的CSS代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initil-scall=1.0">
    <title>Template</title>
    <link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
<div id="menu">
    <header>
        <nav>
            <div id="qw" class="navigation">
                <ul>
                    <li><a href="#">خانه</a></li>
                    <li><a href="#">خدمات</a></li>
                    <li><a href="#">درباره ما</a></li>
                    <li><a href="#">تماس با ما</a></li>
                    <li><a href="#">اموزش ها</a></li>
                </ul>
            </div>
        </nav>
    </header>
</div>
</body>
</html>

使用此代码，文本位于元素的左下方，但我希望它们位于元素的中心

Answer 1

从numbers_bank = tuple(a.replace("]", "") for a in num_new)标记中删除float:right，并在li标记中添加display:inline-block

body {
    background: url("images (1).jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoder(src='images.jpg', sizingMethod='scale')";
}

header nav {
    width: 100%;
    height: 60px;
    top: 0;
    right: 0;
    line-height: 55px;
    border-bottom: #9f4f89;
    position: fixed;
    z-index: 999999;
    background: #d39fb7;
}
header nav #qw {
    background: transparent url("") no-repeat left 5px;
}

header nav #qw ul {
    list-style: none;
    text-align: center;
}

header nav #qw li {
    height: 2em;
    padding: auto;

}

header nav #qw ul li {
    display: inline-block;
    text-align: center;
}

header nav #qw ul li a {
    padding: 0 20px;
    font-size: 20px;
    margin: auto;
    text-decoration: none;
    text-align: center;
    border-left: 1px solid #fff;
    color: #ffffff;
    display: inline-block;
}

Answer 2

您为链接设置的填充：

header nav #qw ul li a {
padding: 32px 32px 7px 7px;
/* everything else that's already wrriten */
}

导致了此问题，因为填充设置的顺序发生了：

padding: top right bottom left;

要使li内部的文本正确居中，应将填充更改为：

header nav #qw ul li a {
padding: 32px 32px 7px 32px; 
/* everything else that's already wrriten */
}

或者，如果您希望顶部和底部填充相同，并且左侧和右侧填充相同，则：

header nav #qw ul li a {
padding: 7px 32px 7px 32px;
/* everything else that's already wrriten */
}

这可以解决您的问题。

P.S。您还可以从以下位置删除float: right;：

header nav #qw ul li {
    display: inline;
    float: right; /* <- this part is not needed. */
}

在div中ul内部的li中居中文本

2 个答案: