我是一名视觉设计师,刚接触 CSS。我遇到了障碍,希望您能帮我解决这个问题!
我在 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>
如有任何帮助,我们将不胜感激。非常感谢!!
最佳答案
不确定如果你想实现这个,
.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>
关于html - 在 div 中居中 ul 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42210352/