CODEWITHSUNDEEP
htmlcss
Jethro Hazelhurst
Jethro Hazelhurst

Reputation: 3285

center content between left float and right float items so that they are center of the page

I am trying to clean up some alignment issues here...

enter image description here

As you can, the bottom arrows are not centered as well as the could be...

I have an item floated to the left of the arrows whose width is ;ess then the items floated to the right of the arrows.

The arrows as a result are off center...

enter image description here

Here is the fiddle

http://jsfiddle.net/6jSFY/292/

My code

/*bottom toolbar*/
    .bottom-toolbar {
        height: 60px;
        background: #292B2C;
        position: fixed;
        bottom: 0;
        width: 100%;
        color: #ffffff;
        padding-left: 15px;
        padding-right: 15px;
        z-index: 2;
    }
    .toolbar-item {
        display: inline-block;
        line-height: 60px;
        padding:0 20px 0 20px ;
        transition: background 0.2s ease 0s;
    }

    .toolbar-item:hover {
        cursor: pointer;
        background: #747677;
        bottom: 10px;
    }
    .toolbar-group {
        display: inline-block;
        margin-right: 30px;
        border-right: 1px solid #393B3C;
    }

<!-- footer toolbar -->
        <div class="bottom-toolbar text-center">
            <div class="pull-left">
                <span class="toolbar-item">Slide 1/3</span>
            </div>

            <div class="toolbar-item">
                <i class="fa fa-arrow-left"></i>
            </div>
            <div class="toolbar-item">
                <i class="fa fa-arrow-right"></i>
            </div>

            <div class="pull-right">
                <div class="toolbar-group">
                    <div class="toolbar-item">
                        <i class="fa fa-check text-success"></i>
                    </div>
                    <div class="toolbar-item">
                        <i class="fa fa-times text-danger"></i>
                    </div>
                </div>
                <div class="toolbar-item">
                    00:00
                </div>
            </div>
        </div>
        <!-- end footer toolbar -->

Question:

Is there a way to center the arrows so that they are dead center on the page regardless of the width of the adjacent items?

Upvotes: 0

Views: 120

Answers (3)

Sridhar
Sridhar

Reputation: 128

kindly check with below mentioned code.

HTML

<div id="container">
 <div id="left"></div>
 <div id="center"></div>
 <div id="right"></div>
</div>

Style

  #container {
    width:100%;
    text-align:center;
   }

 #left {
  float:left;
 width:100px;
height: 20px;
background: #ff0000;
}

#center {
display: inline-block;
margin:0 auto;
width:100px;
height: 20px;
background: #00ff00;
}

 #right {
float:right;
width:100px;
height: 20px;
background: #0000ff;
}

Upvotes: 1

masoud soroush
masoud soroush

Reputation: 677

http://jsfiddle.net/6jSFY/293/

use display block for center div with float left and right should be upper than center in html and now working fine

<div class="bottom-toolbar">
                    <div class="pull-left">
                        <div class="toolbar-item">
11111
                        </div>
                    </div>
                    <div class="pull-right">
                        <div class="toolbar-item">
2222222
                        </div>
                        <div class="toolbar-item">

                        </div>
                    </div>
                    <div class="center">
                        <div class="toolbar-item text-center">
ASDADASDASD
                        </div>
                    </div>

                </div>

Upvotes: 1

disstruct
disstruct

Reputation: 693

Here you go. Codepen

The idea:

for central .toolbar-item use block centering, e.g. with:your arrows width and margin: 0 auto;

Upvotes: 1

Related Questions