如何水平居中浮動文字

-1

如果你去，並減少窗口的寬度來查看屏幕，就好像它是一個移動設備，你可以看到不能輸入橙色的「徽章」（特別是當只有一個徽章適合每條線）我希望它儘可能適合更多的徽章，同時始終保持徽章或該線上的一組徽章水平輸入。班級是不在中心的徽章謝謝！ :)如何水平居中浮動文字

的jsfiddle：http://jsfiddle.net/avg24wrk/

這是HTML

<div class="container"> 
     <div class="sidebar"> 
      <div class="sidebar-inner"> 
       <p class="badge"><span class="vertical-align">Book a Free Consultation!</span></p> 
       <p class="badge"><span class="vertical-align">Second Point</span></p> 
       <p class="badge"><span class="vertical-align">Third Point</span></p> 
      </div> 
     </div>

，這是CSS

* { 
    border: 0; 
    margin: 0; 
    padding: 0; 
} 

.sidebar { 
    float: left; 
    width: 25%; 
    color: #505050; 
} 

.sidebar-inner { 
    margin: 0 30px 0 35px; 
} 

.badge { 
    margin: 10px auto; 
    font-size: 24px; 
    text-align: center; 
    border-radius: 7px; 
    padding: 20px 20px; 
    background-color: #ed9727; 
    cursor: pointer; 
} 

@media screen and (max-width: 490px) { 

    .sidebar { 
     width: 100%; 
    } 

    .sidebar-inner { 
     padding-bottom: 20px; 
     border-bottom: 2px solid #505050; 
     margin: 0 30px; 
     overflow: hidden; 
    } 

    .badge { 
     float: left; 
     margin: 15px 10px; 
     max-width: 150px; 
     min-height: 50px; 
     display: table; 
    } 
}

來源

2015-04-04 user3408117

後置HTML，CSS，或者甚至一個小提琴，而不是一個鏈接到你的網站class，因爲只要有人回答你的問題，你的問題就無法恢復。 – potashin 2015-04-04 21:06:25

對不起！ – user3408117 2015-04-04 21:12:06

不是全部，只是必要的部分）。您也可以訪問http://jsfiddle.net並進行現場演示。 – potashin 2015-04-04 21:13:30

你嘗試加入text-align: center;上課要居中

因爲我你沒有何況你要哪一個類居中，所以我會給你一個簡單的規則試試這個

請註明要居中

來源

2015-04-04 22:06:50

嗨，對不起，該班是徽章，謝謝！ – user3408117 2015-04-04 22:15:43

然後添加這個'text-align：center;'你的班級，並嘗試 – 2015-04-04 22:16:53

我已經完成了，它的相同 – user3408117 2015-04-04 22:37:26

如何水平居中浮動文字

回答

相關問題