如何集中分別包裹在<span>中的兩個元素？

我想在頁面中心組合css按鈕。我已經設置了display: inline-block;。但他們正在向左轉。如果我爲兩者添加一個額外的div作爲父元素，並將它們設置爲一個ID爲display:block，我可以將它們居中。如何集中分別包裹在<span>中的兩個元素？

這裏是CSS：（在WordPress主題自定義函數get_field是先進的自定義字段）的

.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; 
}

這是代碼：

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

來源

2013-12-21 Netizen

如果你可以考慮使用jQuery環繞按鈕的DIV，你可以使用這個：

jQuery wrap All

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

那麼你可以申請css來.Q鍵式包裝。

希望這會有所幫助。

來源

2013-12-21 07:46:00

我試過在footer.php中使用jquery。但是我發現jquery並沒有創建新的類。我不知道我是否犯了錯或錯過了什麼。 – Netizen

@IamSJ你可以在你的footer.php中試試上述代碼。不要忘記將它包裝在$（document）.ready事件中。如果問題仍然存在，你可以在這裏粘貼你的代碼片段。 –

你好，我明白了。問題已解決。謝謝！ – Netizen

將兩個跨度都包裹在父元素中並將該元素居中。

來源

2013-12-21 06:06:40 Jimmy

正如我提到的詮釋，他的問題的描述，「我可以居中他們，如果我增加一個額外的div」。但我想知道我是否可以在不添加其他元素的情況下做到這一點。 – Netizen

我希望不會，因爲如果你嘗試同時居中這兩個元素，那麼它會重疊.. – Jimmy

容易做到的只是使用display：inline-block的

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

display: inline-block;

來源

2013-12-24 09:54:08

這不會發生在我的代碼中。請看看這個 - [小提琴]（http://jsfiddle.net/sjeev/xwz3Z/1/） – Netizen

如何集中分別包裹在<span>中的兩個元素？

回答

相關問題