Home / Questions / 113157
Accepted
Dimoreno
Asked: 2020-10-29 20:59:09 +0800 CST 2020-10-29 20:59:09 +0800 CST

在 div 中居中 ul (CSS)

  • 772

我有以下 div，其中包含背景图像，底部有一个菜单，我的问题是如何将菜单项集中在屏幕的整个宽度上，目前它们显示在左侧。

这是我的代码：

<div class="principal movil_principal">
        <div class="fondo_principal">
          <div id="barra_horizontal_login">
            <ul class="barra_horizontal_ul">
              <li class="barra_horizontal_li">
                <a href><i class="material-icons">help</i> Dato informativo</a>
              </li>
              <li class="barra_horizontal_li">
                <a href><i class="material-icons">help</i> Dato informativo</a>
              </li>
              <li class="barra_horizontal_li">
                <a href><i class="material-icons">help</i> Dato informativo</a>
              </li>
            </ul>
          </div>      
        </div>  
      </div>

CSS：

.principal{
  background-image: url('https://www.oxmoorhyundai.com/wp-content/themes/DealerInspireDealerTheme/images/video-fallback-background.jpg'); 
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: cover;
    margin: 0 auto 1em;  
    padding-top: 25%;
    position: relative;
}
.fondo_principal{
    background-color: rgba(66, 66, 66, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#barra_horizontal_login{
  width: 100%; 
  position: absolute; 
  bottom: 0;
  right: 0;
}
.barra_horizontal_ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(0,0,0,0.3);
}
.barra_horizontal_li{
  float: left;
}
.barra_horizontal_li a{
    color: #bdbdbd;
  display: block;
    font-size: 10px;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  display: inline-flex;
  vertical-align: middle;
}
.barra_horizontal_li a:hover{
    color: #424242;
}
.barra_horizontal_li i{
    color: #bdbdbd;

font-size: 13px;
}

最后我分享我的 jsfiddle div-example

html

2 Answers

  1. Best Answer

    一个快速修复方法是使用 Flexbox，在列表类中添加两行 CSS <ul class="barra_horizontal_ul">。

    在添加的第一行display: flex;中，我们定义了一个 flexbox 容器，在第二行中，justify-content: space-around;我们告诉该容器它的“内部”元素，在这种情况下，<li>每个元素周围的空间等于该行中未使用的总空间或容器，除以包含的元素数量，最后除以二，每个元素的每一边都加上所述空间。

    .principal{
  background-image: url('https://www.oxmoorhyundai.com/wp-content/themes/DealerInspireDealerTheme/images/video-fallback-background.jpg'); 
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: cover;
    margin: 0 auto 1em;  
    padding-top: 25%;
    position: relative;
}
.fondo_principal{
    background-color: rgba(66, 66, 66, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#barra_horizontal_login{
  width: 100%; 
  position: absolute; 
  bottom: 0;
  right: 0;
}
.barra_horizontal_ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(0,0,0,0.3);
  display: flex;
  justify-content: space-around;
  
}
.barra_horizontal_li{
  float: left;
}
.barra_horizontal_li a{
    color: #bdbdbd;
  display: block;
    font-size: 10px;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  display: inline-flex;
  vertical-align: middle;
}
.barra_horizontal_li a:hover{
    color: #424242;
}
.barra_horizontal_li i{
    color: #bdbdbd;

font-size: 13px;
}
    <div class="principal movil_principal">
        <div class="fondo_principal">
          <div id="barra_horizontal_login">
            <ul class="barra_horizontal_ul">
              <li class="barra_horizontal_li">
                <a href><i class="material-icons">help</i> Dato informativo</a>
              </li>
              <li class="barra_horizontal_li">
                <a href><i class="material-icons">help</i> Dato informativo</a>
              </li>
              <li class="barra_horizontal_li">
                <a href><i class="material-icons">help</i> Dato informativo</a>
              </li>
            </ul>
          </div>      
        </div>  
      </div>

    • 1

  2. 要在屏幕上居中元素并且它也是任何屏幕尺寸，如果您不使用引导程序，我将使用 css 的 @media 查询

    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    您输入您的 div class="row" 并在每个列表菜单中使用 col-3 col-m-3 或任何您想要的大小给它您想要的大小，并且它对于任何屏幕大小都保持居中。

    • 0