CODEWITHSUNDEEP
htmlcss
Aegix
Aegix

Reputation: 649

Middle-aligning (center) borders of different widths

How can I middle/center align borders of differing widths?

HTML

<div>
  <span class="large">This is </span><span class="small">a test!</span>
</div>

CSS

.large {
  border-bottom: 5px solid blue;
}
.small {
  border-bottom: 1px solid green
}

See here: https://jsfiddle.net/ybgeL9rf/

I would like the 1px border to be aligned to the middle of the 5px border (instead of the top).

Upvotes: 2

Views: 118

Answers (1)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Add a padding-bottom of 2px to .small:

.large {
    border-bottom: 5px solid blue;
}
.small {
    padding-bottom: 2px;
    border-bottom: 1px solid green
}

Updated Fiddle

Upvotes: 4

Related Questions