Home  >  Q&A  >  body text

css - width设置为100%之后列表无法居中

html代码如下:

css代码如下:

然后我现在出来是这个效果


效果图是这样的:


文字颜色还有标题和文字之间间距可以忽略。。就是想问一下下面的图片和文字如何居中。我之前设置width的像素可以达到居中效果,但是背景色就不能铺满,然后使用width:100%之后就无法居中了。之前使用的margin 0 auto失效,然后尝试text-align:center也没有效果。请问大家有没有什么好的方法解决。

伊谢尔伦伊谢尔伦2648 days ago939

reply all(4)I'll reply

  • 大家讲道理

    大家讲道理2017-04-17 15:06:10

    对于你的这种情况元素居中有两种方法:

    1. flex布局:

    
        .team{
             width:950px;
             height:470px;
             background:#2e2e2e;
             display: flex;
             align-items: center;
             justify-content: center;
        }

    2.transfrom来居中

    在.team中加入:position: relative;
    在dl标签里加入:
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);

    参考链接:transform居中

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-17 15:06:10

    你把三个dl用box包括起来给他固定宽,让box margin:0 auto就可以了

    reply
    0
  • 高洛峰

    高洛峰2017-04-17 15:06:10

    外层再给一个标签,用于width:100%加背景色铺满;里面这个.team给个固定的宽,然后margin:0 auto;

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-17 15:06:10

    第一 是先实现一个正常的背景
    p 默认不需要加宽
    第二,中间内容区给个宽度然后margin:0 auto

    reply
    0
  • Cancelreply