CODEWITHSUNDEEP
htmlcssbootstrap-modal
MDalt
MDalt

Reputation: 1801

Horizontally centering text within a header next to an image

I am trying to center some text within a banner (classic question I know). This banner is split into 12 columns, and there is a cross icon for closing the window in the left-most column. The text is centering in the available space between the cross icon and the end of the banner, rather than centering within the whole banner width. From the way the code is written I cannot see why it would be doing this. Here's the HTML:

<div class='col-xs-12 banner'>
            <a class="navbar-brand cross-link" href="" ng-click="close()">
                <img class="cross" src="/components/cross.png" alt="close">
            </a>
        <h1>{{title}}</h1>
</div>

with CSS:

.banner {
height: 70px;
background-color: red;
h1 {
  color: white;
  text-align: center;
}
.navbar-brand {

  &.cross-link {
    padding: 0px;
    img.cross {
      margin: auto;
      width: 70px;
      height: 70px;
      padding: 29px 28px 27px 28px;
    }

  }

}

When I inspect this on Chrome, the h1 is quite happily sitting within a full-width container as expected, but the image appears to be shifting it across so that it doesn't center properly. Can you see how to resolve this?

Thanks

Upvotes: 0

Views: 47

Answers (2)

coderocket
coderocket

Reputation: 584

What you are missing is a closing } at the end of your .banner block OR at the end of the css you shared.

Upvotes: 0

gmast
gmast

Reputation: 192

You could set the .cross-link to absolute position. Remember to set the container position property to a value different from "static":

.container{ position: relative; }

.cross-link{ position: absolute; left: xxxx; top: xxxx; }

Upvotes: 2

Related Questions