HTML

<div class="About_Container">
  <div class="Icon_Wrapper">
    <div class="Circle">
      <div class="CircleWrapper"> <span class="Icon"> 
   <img src="http://livedemo00.template-help.com/drupal_50108/sites/default/files/icon-service-3.png" /> </span>
   <span class="Text"> CUSTOMER GUARANTEEE </span> </div>
    </div>
  </div>
  <div class="Text_Wrapper"> Vestibulum quis felis ut enim aliquam iaculis.
    Nullam pharetra tortor at quam viverra volutpat. 
    Phasellus vel faucibus dolor. Curabitur ac ni
    i non metus dignissim dapibus eu vel nibh. Phasellus </div>
  <div class="Link_Wrapper"> <a href="#">READ MORE</a> </div>
</div>

CSS

@media ( min-width: 120px) and (max-width:768px) {

#Container_About {
    min-height: 1291px;
    background: #404040;
    width: 100%;
    float: left;
}

.TradeSlogan {
    font-size: 60px;
    line-height: 66px;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    margin-bottom: 25px;
    font-weight: 800;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

.SomeTextWrapper {
    color: #949393;
    margin: 10px;
}

.SomeTextWrapper  .SomeTextWrapper:before,  .SomeTextWrapper:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.SomeTextWrapper:after { clear: both; }

/**
     * For IE 6/7 only
     * Include this rule to trigger hasLayout and contain floats.
     */

.SomeTextWrapper {  *zoom: 1;
}

.About_Container {
    height: 100%;
    width: 100%;
}

.Circle {
    margin: 10px;
    height: 170px;
    width: 170px;
    border-radius: 170px;
    background: #949393;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.Icon_Wrapper {
    text-align: left;
    height: 100%;
    width: 100%;
}

.CircleWrapper { padding: 10px; }

.CircleWrapper Icon, Text {
    float: left;
    height: 44%;
    width: 100%;
    margin: 3%;
}

.Text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #03c7de;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 1.5px;
}

.Text_Wrapper {
    margin: 25px;
    color: #03c7de;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 1.5px;
}

.Link_Wrapper {
    padding: 20px;
    text-align: right;
}

.Link_Wrapper a {
    color: #03c7de;
    font-weight: 300;
    font-size: 17px;
    letter-spacing: 1.5px;
}

Answer 1

试试这个http://jsfiddle.net/8dEN3/5/

.Circle{

        margin:10px auto;
        height:170px;
        width:170px;
        border-radius:170px;
        background:#949393;
        display:block;
        vertical-align:middle;
        text-align:center;
    }

Answer 2

.Icon_Wrapper {
  text-align: left;
  height: 100%;
  width: 170px;
  margin: auto;
}

因为我们知道圆的宽度我们可以使圆的容器(.Icon_Wrapper)具有其宽度，并通过margin:auto

将其与页面的中心对齐

Updated Fiddle

Answer 3

试试这个：

.Circle{
    margin:auto;
    height:170px;
    width:170px;
    border-radius:170px;
    background:#949393;
    text-align:center;
}

.Circle .CircleWrapper {
    display: table-cell;
    height: 170px;
    padding: 0;
    vertical-align: middle;
}

查看实际操作 - http://jsfiddle.net/Q3Mcc/1/

将div放在中心文本对齐不起作用

HTML

CSS

3 个答案: