按钮链接格式 - 居中和匹配宽度 [英] Button Link Formatting - Center and Match Width

问题描述

我使用链接和一些CSS创建了几个简单的按钮，为它提供背景，并且试图将其集中在我的页面上。但是，因为其中一个按钮的文字比另一个更长，所以按钮大小不一，为了保持一致，我希望它们的宽度相同。

我如何保持这些按钮的大小相同？试图浮动它们并使用百分比宽度会导致它们不居中。相关标记如下。

 < section class =buttonsSection> 
< a class =buttonhref =＃>很长的句子< / a> 
< a class =buttonhref =＃>短语短语< / a> 
< / section> 
 
 
 .button {
 padding：10px 15px; 
 background-color：deepskyblue; 
颜色：白色; 
} 
 
 .buttonsSection {
 text-align：center; 
 margin-top：30px; 
 margin-bottom：30px; 
} 
 
 .buttons部分a {
 margin：3px; 
} 
  

JSFiddle： http://jsfiddle.net/Dragonseer/eTvCp/11/

Answer
虽然下面的两个答案都是有效的，但我更新了使用Flexbox的答案。 大多数现代浏览器都对它有很好的支持，其中包括将在不久的将来发布的IE11。 Flexbox似乎提供了一个更好的解决方案来执行复杂的布局，而这些布局所需的工作量要少于浮动项目等替代方案。

轻松完成 > flexbox ：

  .button {
 padding：10px 15px; 
 width：150px; / *固定宽度链接* / 
 background-color：deepskyblue; 
颜色：白色; 
 margin：3px; 
} 
 
 .callToAction {
 margin：30px 0; 
 display：flex; /* 魔法！ * / 
 justify-content：center; / *定心魔法！ * / 
} 
  

工作示例

I've created a couple of simple buttons using a link and some CSS to give it a background and I'm trying to center it on my page. However, because the text in one of the buttons is longer than the other, the buttons are of different sizes and for consistency, I'd like them to be the same width.

How can I keep these buttons the same size? Trying to float them and use percentage widths results in them not being centered. The relevant markup is below.

<section class="buttonsSection">
    <a class="button" href="#">Very Long Sentence</a>
    <a class="button" href="#">Short Phrase</a>
</section>


.button {
    padding: 10px 15px;
    background-color: deepskyblue;
    color: white;
}

.buttonsSection{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

.buttonsSection a {
    margin: 3px;
}

JSFiddle: http://jsfiddle.net/Dragonseer/eTvCp/11/

Answer While both of the answer below are valid, I'm updating my answer to using Flexbox. Most modern browsers have excellent support for it, including IE11 which will be released in the very near future. Flexbox appears to provide a much better solution to doing complex layouts which requires less effort than it's alternatives, such as floating items.

解决方案

Easily done with flexbox:

.button {
    padding: 10px 15px;
    width: 150px; /* Fixed width links */
    background-color:deepskyblue;
    color: white;
    margin: 3px;
}

.callToAction {
    margin: 30px 0;
    display: flex; /* Magic! */
    justify-content: center; /* Centering magic! */
}

Working Example

这篇关于按钮链接格式 - 居中和匹配宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！