How to center two elements which are separately wrapped in ?

Question

I want to center a combination of css buttons in a page. I have set display: inline-block;. 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 display:block.

Here is the 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;
}

This is the code (custom function in WordPress theme. get_field is of Advanced Custom fields'):

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' );

Could any body suggest me how to do it keeping the php code intact and by just customizing the css?

Update: 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 text-align:center. That temporarily enabled me achieve what I need. But I want to know why can't I achieve in the usual way- Fiddle

score 1 · Accepted Answer · answered Dec 21 '13 at 07:46

1

If you can consider using jQuery to wrap a div around the buttons, you can use this:

jQuery wrap All

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

Then you can apply css to .q-button-wrap.

Hope this helps.

answered Dec 21 '13 at 07:46

Andy Librian

911
5
12

I tried using the jquery in footer.php. But I see that the jquery hasn't created the new class at all. I don't know if I made a mistake or missed something. – Netizen Dec 21 '13 at 08:15
@IamSJ you can try the aforementioned code in your footer.php. Don't forget to wrap it inside $(document).ready event. You can paste your code snippet here if the problem still occurs. – Andy Librian Dec 21 '13 at 08:19
I need another help. Your answer resolved helped me center the element. Now, can you tell me how to add a class to an hyperlink with in the span element using jquery? – Netizen Dec 21 '13 at 12:09
what does your html element looks like? say a html : `Some link`, you can add class with `$('.q-code a').addClass('your-class-here');` – Andy Librian Dec 21 '13 at 12:28
I will follow up on your answer to the new question. Thanks for your kind help. – Netizen Dec 21 '13 at 13:01
Hello, @andylibrian I have a problem with centering if width is set to `width: 100%` ;. Can you help me with it? Here is the [code- Fiddle](http://jsfiddle.net/sjeev/xwz3Z/1/) – Netizen Dec 25 '13 at 16:01

score 1 · Answer 2 · answered Dec 24 '13 at 09:54

1

easy to do just use display: inline-block

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

 display: inline-block;

answered Dec 24 '13 at 09:54

Robbie Bardijn

483
2
6

It doesn't happen with my code. Please check out this- [Fiddle](http://jsfiddle.net/sjeev/xwz3Z/1/) – Netizen Dec 24 '13 at 11:06

score 0 · Answer 3 · answered Dec 21 '13 at 06:06

0

Wrap both the spans in a parent element and center that element.

answered Dec 21 '13 at 06:06

Jimmy

203
1
10

As I mentioned int he question's description, "I could center them if I add an additional div". But I want to know if I can do it without adding another element. – Netizen Dec 21 '13 at 06:08
I hope no, because if you try to center both the elements at the same time, thay will overlap.. – Jimmy Dec 21 '13 at 06:11

How to center two elements which are separately wrapped in ?

3 Answers3