Question

我想在页面中集中css按钮的组合。我已设置display: inline-block;。但他们正在左转。如果我添加一个额外的div作为两者的父元素，我可以将它们置于中心位置，并为它们设置一个display:block的id。

这是css：

.q-button {
background-color: green;
color: #FFF;
min-width: 144px;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: none;
outline: none;
height: 38px;
margin-right: 10px;
margin-bottom: 20px;
line-height: 45px;
font-size: 12px;
padding: 0 20px;
font-weight: bold;
-webkit-transition: all .2s linear;
-moz-transition: background .2s linear;
-o-transition: all .2s linear;
-ms-transition: all .2s linear;
transition: all .2s linear;
display: inline-block;
text-transform: none;
position: relative;
}

.q-button a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 45px;
text-decoration: none;
z-index: 10;
}

#q-button-container{
left: 0;
right: 0;
margin: auto;
width: 49px;
display: block;
display: inline-block;
}

这是代码（WordPress主题中的自定义函数。get_field属于高级自定义字段'）：

function custom_content_filter_the_content( $content ) {
    if ( function_exists('get_field') ) {
      $content .= '<span class="q-button"  id="q-button-container" data-icon="a">' . get_field('website') . '</span>';
      $content .= '<span class="q-button"  id="q-button-container" data-icon="a">' . get_field("website2") . '</span>';

    }
    return $content;
}
add_filter( 'the_content', 'custom_content_filter_the_content' );

有没有人可以建议我如何保持php代码完好无损并只是自定义css？

更新：我可以在用新类包装后将按钮居中。但是，如果我使用text-align:center，我只能将它们集中在一起。这暂时使我实现了我的需要。但我想知道为什么我不能以通常的方式实现 - Fiddle

Answer 1

如果您可以考虑使用jQuery在按钮周围包装div，则可以使用：

jQuery wrap All

$( ".q-button" ).wrapAll( "<div class='q-button-wrap' />");

然后你可以将css应用于.q-button-wrap。

希望这有帮助。

Answer 2

只需使用display：inline-block

即可

http://jsfiddle.net/robbiebardijn/q745U/

 display: inline-block;

Answer 3

将两个跨距包裹在父元素中并将该元素居中。

如何将两个单独包含在<span>？</span>中的元素居中

3 个答案: