在div中居中ul内容

我是一名视觉设计师，也是CSS的新手。我碰到了一个路障，希望你能帮我解决问题！在div中居中ul内容

我有一些文本和图像在ul我想要集中在一个div无论如何浏览器的大小。我将此代码添加到自适应WordPress主题中。

.clinCon { 
 
    height: 460px; 
 
    background: rgb(249, 255, 254); /* Old browsers */ 
 
    background: -moz-linear-gradient(-45deg, rgba(249, 255, 254, 1) 0%, rgba(253, 253, 253, 1) 100%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(-45deg, rgba(249, 255, 254, 1) 0%, rgba(253, 253, 253, 1) 100%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(135deg, rgba(249, 255, 254, 1) 0%, rgba(253, 253, 253, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f9fffe', endColorstr='#fdfdfd', GradientType=1); /* IE6-9 fallback on horizontal gradient  */ 
 
    border-bottom-left-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
} 
 
.clinCon > ul { 
 
    list-style-type: none; 
 
    padding: 33px 0px 0px 0px; 
 
    position: relative; 
 
    font-size: 22px; 
 
    letter-spacing: 0.05em; 
 
    color: #566471; 
 
} 
 
.clinCon img { 
 
    padding: 11px 20px 0 0; 
 
    color: #566471!important; 
 
    width: 70px; 
 
} 
 
.clinCon p { 
 
    font-size: 13px; 
 
    position: relative; 
 
    top: -23px; 
 
    left: 70px; 
 
}

<section class="shadow"> 
 
    <div class="clinical">CLINICAL</div> 
 
    <div class="clinCon"> 
 
    <ul> 
 
     <li> 
 
     <img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon">1-on-1 Therapy</li> 
 
     <p class="explain">Address root causes of addiction</p> 
 
     <li> 
 
     <img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon">Addiction Education</li> 
 
     <p class="explain">Understand Addiction's inner workings</p> 
 
     <li> 
 
     <img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon">Literary Therapy</li> 
 
     <p class="explain">Identify, process and resolve trauma</p> 
 
     <li> 
 
     <img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon">Process Group</li> 
 
     <p class="explain">Connect with a group of your peers</p> 
 
    </ul> 
 
    </div> 
 
</section>

任何帮助将不胜感激。非常感谢！！

来源

2017-02-13 BradleyB

截至目前，你的问题还不清楚。请提供[mcve]以便检查。还请确切指定您希望图像居中的元素，它们应该如何相对定位，以及是否需要水平或垂直对齐，或两者兼而有之。 –

改变了你的HTML和CSS，以满足您的要求....

.clinCon{ 
 
height:auto; 
 
background: rgb(249,255,254); /* Old browsers */ 
 
background: -moz-linear-gradient(-45deg, rgba(249,255,254,1) 0%,  rgba(253,253,253,1) 100%); /* FF3.6-15 */ 
 
background: -webkit-linear-gradient(-45deg, rgba(249,255,254,1) 0%,rgba(253,253,253,1) 100%); /* Chrome10-25,Safari5.1-6 */ 
 
background: linear-gradient(135deg, rgba(249,255,254,1) 0%,rgba(253,253,253,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9fffe', endColorstr='#fdfdfd',GradientType=1); /* IE6-9 fallback on horizontal gradient  */ 
 
border-bottom-left-radius:5px; 
 
border-bottom-right-radius:5px; 
 
} 
 

 
.clinCon > ul{ 
 
list-style-type: none; 
 
position: relative; 
 
font-size: 22px; 
 
letter-spacing: 0.05em; 
 
color: #566471; 
 
} 
 
.clinCon > ul > li { 
 
    height: 70px; 
 
    display: block; 
 
    width: 400px; 
 
    margin: 0 auto; 
 
    padding: 20px 0px; 
 
} 
 
.clinCon img{ 
 
color: #566471!important; 
 
    width: 70px; 
 
    height: 70px; 
 
    display: inline-block; 
 
    float: left; 
 
    margin-right: 20px; 
 
} 
 
.clinCon span{ 
 
display: inline-block; 
 
    line-height: 1; 
 
    padding: 10px 0; 
 
} 
 

 
.clinCon p{ 
 
font-size: 13px; 
 
    position: relative; 
 
    display: block; 
 
    margin: 0 !important; 
 
    margin-left: -35px; 
 
}

<section class="shadow"> 
 
<div class="clinical">CLINICAL</div> 
 
<div class="clinCon"> 
 
\t <ul> 
 
\t \t <li><img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon"><span>1-on-1 Therapy</span><p class="explain">Address root causes of addiction</p></li> 
 
\t \t <li><img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon"><span>Addiction Education</span><p class="explain">Understand Addiction's inner workings</p></li> 
 
\t \t <li><img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon"><span>Literary Therapy</span><p class="explain">Identify, process and resolve trauma</p></li> 
 
\t \t <li><img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon"><span>Process Group</span><p class="explain">Connect with a group of your peers</p></li> 
 
\t </ul> 
 
</div> 
 
</section>

检查了这一点，让我知道它是否符合您的要求...

来源

2017-02-13 18:02:48 Prateek

不仅你发布了一个已经提出的解决方案的答案，但你也拼错了属性值，确保它不起作用。建议您在发布之前测试任何代码。 –

更新了代码，请查看..... – Prateek

不确定如果你想实现这个，

.clinCon { 
 
    height: 500px; 
 
    width: 100%; 
 
    text-align: center; 
 
    background: rgb(249, 255, 254); 
 
    /* Old browsers */ 
 
    background: -moz-linear-gradient(-45deg, rgba(249, 255, 254, 1) 0%, rgba(253, 253, 253, 1) 100%); 
 
    /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(-45deg, rgba(249, 255, 254, 1) 0%, rgba(253, 253, 253, 1) 100%); 
 
    /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(135deg, rgba(249, 255, 254, 1) 0%, rgba(253, 253, 253, 1) 100%); 
 
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f9fffe', endColorstr='#fdfdfd', GradientType=1); 
 
    /* IE6-9 fallback on horizontal gradient  */ 
 
    border-bottom-left-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
} 
 
.clinCon > ul { 
 
    list-style-type: none; 
 
    padding: 33px 0px 0px 0px; 
 
    position: relative; 
 
    font-size: 22px; 
 
    letter-spacing: 0.05em; 
 
    color: #566471; 
 
} 
 
.clinCon img { 
 
    padding: 11px 20px 0 0; 
 
    color: #566471!important; 
 
    width: 70px; 
 
    float: left; 
 
    margin-left: 2em; 
 
} 
 
.clinCon p { 
 
    font-size: 13px; 
 
    float: right; 
 
    margin-right: 3em; 
 
    margin-top: 2em; 
 
}

<section class="shadow"> 
 
    <div class="clinical">CLINICAL</div> 
 
    <div class="clinCon"> 
 

 
    <ul> 
 
     <li> 
 
     <img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon"> 
 

 
     <p class="explain">Process Group 
 
      <br>Connect with a group of your peers</p> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</section>

来源

2017-02-13 18:14:30

非常感谢！这有很大帮助。但是，它将图像叠加在文本和解释之上。我想要做的是将图像保留在左侧，标题和解释在右侧。这有意义吗？下面的链接应该说明它 - 图像是圆圈，文字和解释是线条。 http://www.freepik.com/free-icon/list-in-bullet-form_735762.htm再一次，非常感谢！ – BradleyB

在div中居中ul内容

回答

相关问题