CODEWITHSUNDEEP
javascriptjqueryhtmlcss
javajoe316
javajoe316

Reputation: 149

css center middle element in div for multiple screen sizes

<div class="add_nav_header">
    <div class="centerButtons">
        <a class="btnLogout smallBtn" data-role="button"></a>
        <a class="btnSearch smallBtn" data-role="button"></a>
        <a class="btnViewList smallBtn" data-role="button"></a>
    </div>
</div>

.centerButtons {
  width: 50%;
  margin: 0 auto;
}
.add_nav_header {
  display: inline-block;
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding-bottom: .5em;
}
.smallBtn {
  float: right;
  margin: .3em;
  padding: .6em;
  font-size: .9em;
}
.btnLogout {
  float: right;
}
.btnViewList {
  float: left;
}
.btnSearch {
  left: -33%;
}

This is my html and css and I want to center the middle btnSearch button but I don't want to have to set the left percentage for every screen size with media queries.

jsfiddle example

Upvotes: 1

Views: 331

Answers (2)

emmanuel
emmanuel

Reputation: 9615

You could use text-align: center to the container and remove float from div you want to be centered.

.centerButtons {
    width: 50%;
    margin: 0 auto;
    text-align: center;
}
.add_nav_header {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding-bottom: .5em;
}
.smallBtn {
    /* float: right; */
    margin: .3em;
    padding: .6em;
    font-size: .9em;
    display: inline-block;
}
.btnLogout {
    float: left;
}
.btnViewList {
    float: right;
}
/* .btnSearch {
  left: -33%;
} */

Fiddle: http://jsfiddle.net/zfh1ono0/

Upvotes: 4

bendulum
bendulum

Reputation: 1867

I'm not sure if I fully understand your question, but this link might help you: CSS centering. The key is this line:

transform: translate(-50%, -50%);

Upvotes: 0

Related Questions