CODEWITHSUNDEEP
csscss-position
Myoji
Myoji

Reputation: 279

Center H2 slightly above it's parent div?

I am trying to position a styled heading to be centered and to sit slightly above it's parent div. I assumed the heading would have to be absolutely positioned to be able to be shifted outside of the parent by adding a negative margin to the top. I can center it when it's position is relative, but I can not add a negative margin to bring it outside of the parent.

HTML

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="content">
                <h2 class="content-box-title">A Heading</h2>
                <div class="content-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, culpa illum! Sint maiores numquam provident, consequatur voluptatibus, repudiandae, dolorum sed, itaque saepe magni fugit mollitia! Repellat dignissimos, quas esse itaque.</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.content {
  position: relative;
  background-color: #d5d5d5;
}

.content-box-title {
    position: absolute;
    background-color: grey;
    text-align: center;
    padding: 10px;
    margin: -40px auto;
}

.content-body {
    padding: 20px;
}

http://jsfiddle.net/LsohxL3m/

Upvotes: 0

Views: 746

Answers (5)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

change 

.content-box-title {
    position: absolute;
    background-color: grey;
    text-align: center;
    padding: 10px;
    margin: -40px auto;
}

.content-body {
    padding: 20px;
}

to

.content-box-title {
   transform: translateY(-60px);
   background-color: grey;
   margin-top: 60px;
   text-align: center;
   padding: 10px;
}
.content-body {
   padding: 0 20px 20px 20px;
}

Here is a sample

Upvotes: 0

rb_x
rb_x

Reputation: 66

You can use translate:

.content-box-title {
    position: absolute;
    background-color: grey;
    text-align: center;
    padding: 10px;
    margin-top: -40px;
    left:50%;
    transform: translate(-50%, 0);
}

http://jsfiddle.net/LsohxL3m/6/

Upvotes: 0

James Waddington
James Waddington

Reputation: 2905

By making the title an inline-block, you can center it using text-align: center on the parent div. You don't need absolute positioning or auto margin then, so you can just use a negative top margin. You can use text-align left on the content to keep that left aligned:

.content {
  background-color: #d5d5d5;
    text-align: center;
}

.content-box-title {
    display: inline-block;
    background-color: grey;
    text-align: center;
    padding: 10px;
    margin-top: -40px;
}

.content-body {
    padding: 20px;
    text-align: left;
}

Here's a fiddle.

Upvotes: 1

Phlume
Phlume

Reputation: 3131

I adjusted that fiddle to include this css content:

.content h2 {
box-sizing: border-box;
margin: -60px auto 0;
width: 100%;
}

an it seemed to center the h2 and set it just a bit above the content div.

but after deeper investigation, it looks like you just need to as a width to your original tag, and the box-sizing rule to assist with the padding/margin on the element.

I appended this to your existing .content-box-title css and it worked fine:

width: 100%;
box-sizing: border-box;

Upvotes: 1

Anirudh Ajith
Anirudh Ajith

Reputation: 927

Check now: http://jsfiddle.net/LsohxL3m/1/

I changed the styling of the title as follows:

.content-box-title {
    background-color: grey;
    text-align: center;
    padding: 10px;
    margin-top: -40px;
    margin-left: auto;
    margin-right: auto; 
}

Upvotes: 0

Related Questions