Databases
StackOverflow2013
Postsdbo
POHow to center two elements which are separately wrapped in <span>?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to center two elements which are separately wrapped in <span>?
    text
    copied!<p>I want to center a combination of css buttons in a page. I have set <code>display: inline-block;</code>. But they are aligning to left. I could center them if I add an additional div as parent element for the both and set them a id giving it a <code>display:block</code>. </p> <p>Here is the css:</p> <pre><code>.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; } </code></pre> <p>This is the code (custom function in WordPress theme. <code>get_field</code> is of Advanced Custom fields'): </p> <pre><code>function custom_content_filter_the_content( $content ) { if ( function_exists('get_field') ) { $content .= '&lt;span class="q-button" id="q-button-container" data-icon="a"&gt;' . get_field('website') . '&lt;/span&gt;'; $content .= '&lt;span class="q-button" id="q-button-container" data-icon="a"&gt;' . get_field("website2") . '&lt;/span&gt;'; } return $content; } add_filter( 'the_content', 'custom_content_filter_the_content' ); </code></pre> <p>Could any body suggest me how to do it keeping the php code intact and by just customizing the css? </p> <p><strong>Update</strong>: I was able to center the buttons after wrapping them with a new class. But here I am only able to center them if I use <code>text-align:center</code>. That temporarily enabled me achieve what I need. But I want to know why can't I achieve in the usual way- <a href="http://jsfiddle.net/sjeev/xwz3Z/1/" rel="nofollow">Fiddle</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload