0

I've got the following problem:

enter image description here

I have two circles that are put one on top of the other. I would like them next to each other. Here is the HTML for the above picture:

<div class="col-lg-6">
    <div class="page-scroll" style="text-align:center !important;"  id="arrow2">
        <a href="#feature2" class="btn btn-circle" style="border: 4px solid black !important;color:black">
           <i style="font-weight:bold" class="fa fa-angle-double-down animated"></i>
        </a>
    </div>

    <div class="page-scroll" style="text-align:center !important;">
        <a href="#intro" class="btn btn-circle" style="border: 4px solid black !important;color:black">
            <i style="font-weight:bold" class="fa fa-angle-double-up animated"></i>
        </a>
    </div>
</div>

I have followed the following link and get the following:

enter image description here

Here is my HTML for this:

<div class="col-lg-6">
    <div class="page-scroll" style="text-align:center !important;float:left;"  id="arrow2">
        <a href="#feature2" class="btn btn-circle" style="border: 4px solid black !important;color:black">
            <i style="font-weight:bold" class="fa fa-angle-double-down animated"></i>
        </a>
    </div>

    <div class="page-scroll" style="text-align:center !important;float:left;">
        <a href="#intro" class="btn btn-circle" style="border: 4px solid black !important;color:black">
           <i style="font-weight:bold" class="fa fa-angle-double-up animated"></i>
        </a>
    </div>
</div>

So my question is how can I get these two buttons next to each other but in the middle of the text block?

Community
  • 1
  • 1
user481610
  • 3,230
  • 4
  • 54
  • 101

3 Answers3

0

I would put them both in the same div, set the style of each to block and then your text-align center will affect them. Also you should probably take the float left off, because that is sending them to the left of the page.

Josh
  • 119
  • 2
  • The problem is when I take the float:left off then the circles go one on top of the other. I Don't want this hence the reason I put in left to get them next to each other. I then want those to circles that are next to each other in the center of the writing – user481610 Jul 19 '14 at 00:58
  • I believe this is because they are in seperate divs. Divs are not inline elements, and therefore wouldn't be placed next to eachother, it would act as a newline character. – Josh Jul 19 '14 at 01:00
  • I would look into `` tags, or put the two in the same div – Josh Jul 19 '14 at 01:01
0

The winning answer was:

<div style="display: inline-block; margin-left: auto; margin-right: auto;">
                        <div class="page-scroll" style="text-align:center !important;float:left;padding-right:2%"  id="arrow2">
                            <a href="#feature2" class="btn btn-circle" style="border: 4px solid black !important;color:black">
                                <i style="font-weight:bold" class="fa fa-angle-double-down animated"></i>
                            </a>
                        </div>

                        <div class="page-scroll" style="text-align:center !important;float:left;" id="arrow4">
                            <a href="#intro" class="btn btn-circle" style="border: 4px solid black !important;color:black">
                                <i style="font-weight:bold" class="fa fa-angle-double-up animated"></i>
                            </a>
                        </div>
                    </div>
user481610
  • 3,230
  • 4
  • 54
  • 101
0

Put both of your icons in the same div. They were stacking on top of each other before because you had them in separate divs. After that, you can text-align: center; for the parent div which holds them both and that should work.

Something like this for illustration:

<div class="col-md-6">
    <div class="page-scroll text-center">
        <a href="#"><i class='fa fa-angle-double-up'></i></a>
        <a href="#"><i class='fa fa-angle-double-down'></i></a>
    </div>
</div>

I just tested this in a bootstrap project im working on it worked for me as you desired

jacurtis
  • 736
  • 1
  • 5
  • 14
  • I would consider marking this as the correct answer, instead of the answer you wrote for yourself. This is much more clean and concise. Plus it is more 'bootstrap-y' since it uses bootstrap styles instead of the inline style tag. You have lots of inline styles in your example and several of them are unnecessary, which overcomplicate the simplicity of what you need. You never want to style more than you need, because it often leads to weird reactions down the road. Just my two cents. – jacurtis Jul 19 '14 at 01:07