CODEWITHSUNDEEP
cssvertical-alignmenthtml-headingheading
vyperlook
vyperlook

Reputation: 91

vertically div inside heading on the same line

After I kept trying I made some tweaks that would allow me to have the div on the same line with h3, but it's not centered. I simply want to have the div on the same line, next to the h3, with vertically centered h3 text (or the div, it doesn't matter as long as text appears .

I guess that position: absolute; is a problem, but if I remove it, the circle around the number won't be a circle anymore (and I need to keep it a circle) As it is now, the circle will be positioned on the same line, but it vertically aligns top, if the heading text has enough space on the page (one line) enter image description here

or bottom, if the heading text goes on two lines (due to being too long) enter image description here

And also add 10px between the circle and the text, horizontally.

I use this html:

 <h3> <div class="numberCircle">
<div class="content">24</div> </div>Smallest Personal Computer - Micro Mote </h3>

and this css:

 .numberCircle {
    border-radius: 50%;
    -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
    width: 50px;
    padding: 8px;
    font-size: 32px;
    line-height: 1em;
    border: 2px solid #666;
    position: relative;

}
.numberCircle:before{
  content:"";
  display:block;
  margin-top:100%;
}
.numberCircle .content {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
}

for h3:

 h3 {
  line-height: 1.17391em;
  color: #242d36;
  font-family: "PT Serif", Georgia, Times, serif;
  font-size: 23px;
  margin: 27px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align:middle; 
}

Upvotes: 2

Views: 395

Answers (2)

Fred
Fred

Reputation: 2478

You can also make this easy for yourself by rather using a table.

Check this out:

CSS:

.MyTable {
    width: 300px;
}

.MyTable tr td {
    vertical-align: middle;
}

.circle {
    background: red;
    width: 40px;
    height: 40px;
    text-align: center;
    position: relative;
    display: inline-block;
    border-radius: 100%;
    border: 1px solid black;
    padding: 10px;
    font-size: 32px;
}

.text {
    background: green;
    font-family: "PT Serif", Georgia, Times, serif;
    font-size: 23px;
}

HTML:

<table class="MyTable">
    <tr>
        <td>
            <div class="circle">
                24
            </div>
        </td>
        <td class="text">
            Smallest Personal Computer - Micro Mote
        </td>
    </tr>
</table>

With this, you don't have to worry about the line-heigt, and all those "itty gritty" stuff. You will be able to change your font-size and still have your text centered perfectly.

Upvotes: 1

Gerard Reches
Gerard Reches

Reputation: 3154

You can easily achieve it changing a bit your HTML and moving the flexbox to the wrapper. 

 .numberCircle {
    border-radius: 50%;
    -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
    width: 50px;
    padding: 8px;
    font-size: 32px;
    line-height: 1em;
    border: 2px solid #666;
    position: relative;

}
.numberCircle:before{
  content:"";
  display:block;
  margin-top:100%;
}
.numberCircle .content {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
}
h3 {
  line-height: 1.17391em;
  color: #242d36;
  font-family: "PT Serif", Georgia, Times, serif;
  font-size: 23px;
  margin: 27px 0;
  vertical-align:middle; 
}
.wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="wrapper">
  <div class="numberCircle">
    <div class="content">24</div>
  </div>
  <h3>Smallest Personal Computer - Micro Mote </h3>
</div>

Upvotes: 1

Related Questions