如何水平居中浮动文字

-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

如何水平居中浮动文字

回答

相关问题