CODEWITHSUNDEEP
htmlcss
Paul
Paul

Reputation: 3368

Element not centering with :after

I am using a vertical padding of 30px, but for some reason my content, "Series" in this case, is not centering vertically.

Is the :after element causing this or what would be? Anyone know what I could do?

.section-title {
	padding: 30px 0;
	height: auto;
	position: relative;
  background: green;
}
.title-wrap {
	margin: 0 13%;
}
.section-main-title-wrap {
	width: 100%;
	display: block;
	position: relative;
	text-align: center;
}
.section-main-title {
	position: relative;
	color: #009ED2;
	font-family: 'Muli', sans-serif;
	font-size: 1.8rem;
	width: auto;
	display: inline-block;
	padding: .625rem 0;
	margin-bottom: 50px;
	line-height: 1.4em;
}
.section-main-title:after {
	content: "";
	width: 80%;
	height: 3px;
	background: #009ED2;
    bottom: 0;
    position: absolute;
    left: 10%;
}
<section class="section-title">
  <div class="title-wrap">
    <div class="section-main-title-wrap">
      <header class="section-main-title text-center">SERIES</header>
    </div>
  </div>
</section>

Upvotes: 0

Views: 46

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105853

you could make it a bit more simple with flex model and less HTML

header {
  background: 
  /* gradient to see middle for demo purpose, you can remove it */
  linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.2) 50%)
  /* background-color */
  green;
  display: flex;
}

header h1 {
  color: white;/* whatever */
  margin: 30px auto;/* from your initial padding-value*/
  padding: 0.3em 0;/* add some space to draw border at bottom */
  background: linear-gradient(to left, transparent 10%, currentcolor 10%, currentcolor 90%, transparent 90%) bottom center no-repeat;
  background-size: 100% 0.1em;
}

h1:hover {
  color: tomato;
}
<header>
  <h1> SERIES</h1>
</header>

You also use an height on header and only use padding to draw the bottom border :

.bis {
  height:200px;
  margin:10px 0;
  font-size:2em;
  background:/* gradient to see middle for demo purpose, you can remove it */linear-gradient(to top, transparent 50%, rgba(0,0,0,0.2) 50%) /* background-color */green;
  display:flex;
}
header h2 {
  color:white;
  margin:30px auto;
  padding:0.3em 0;
  background:linear-gradient(to left, transparent 10%, currentcolor 10%, currentcolor 90%, transparent 90%) bottom center no-repeat;
  background-size: 100% 0.15em;
}
.bis h2:hover{
  color:tomato;
  font-size:32px
}
.bis h2 {
  margin:auto;
  color:gold;
  transition:0.25s
}
<header class="bis">
  <h2> SERIES</h2>
</header>

I used currentcolor, so visual bottom border gets update from font color :)

Upvotes: 1

Johannes
Johannes

Reputation: 67738

In this case it's all due to the different top and bottom margins. Just delete the margin-bottom: 50px from .section-main-title and add half of that margin each as top and bottom padding to .section-title, changing padding: 30px 0;to padding: 55px 0;:

.section-title {
	padding: 55px 0;
	height: auto;
	position: relative;
  background: green;
}
.title-wrap {
	margin: 0 13%;
}
.section-main-title-wrap {
	width: 100%;
	display: block;
	position: relative;
	text-align: center;
}
.section-main-title {
	position: relative;
	color: #009ED2;
	font-family: 'Muli', sans-serif;
	font-size: 1.8rem;
	width: auto;
	display: inline-block;
	padding: .625rem 0;
	line-height: 1.4em;
}
.section-main-title:after {
	content: "";
	width: 80%;
	height: 3px;
	background: #009ED2;
    bottom: 0;
    position: absolute;
    left: 10%;
}
<section class="section-title">
  <div class="title-wrap">
    <div class="section-main-title-wrap">
      <header class="section-main-title text-center">SERIES</header>
    </div>
  </div>
</section>

Or if you don't like the way that looks together with the line, use different top and bottom values for that .section-title padding.

Upvotes: 1

Rajan Patil
Rajan Patil

Reputation: 1002

To center your "Series" vertically apply fixed height, padding-top and padding-bottom to your .section-main-title-wrap class and for centering it horizontally, add "margin-left: auto" and "margin-right: auto" in .section-main-title class.

.section-main-title-wrap {
  width: 100%;
  display: block;
  position: relative;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
  height:65px;
}

.section-main-title {
  position: relative;
  color: #009ED2;
  font-family: 'Muli', sans-serif;
  font-size: 1.8rem;
  width: auto;  
  display: inline-block;  
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4em;
}

Here is the example : https://jsfiddle.net/of92nxyp/

Upvotes: 1

Related Questions