Question

我是一名视觉设计师，也是CSS新手。我遇到了障碍，我希望你可以帮我解决一下！

我在ul中有一些文本和图像，无论浏览器的大小调整如何，我都想在div中居中。我将此代码添加到自适应wordpress主题。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

非常感谢任何帮助。非常感谢!!

Answer 1

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

.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>

Answer 2

更改 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">
	<ul>
		<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>
		<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>
		<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>
		<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>
	</ul>
</div>
</section>

检查一下，如果符合您的要求，请告诉我......

在div中居中ul内容

2 个答案: