CODEWITHSUNDEEP
htmlcssgeometryaspect-ratio
Patrick Roberts
Patrick Roberts

Reputation: 51866

How to vertically center text relative to a circle

Here is what I've tried so far:

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
html {
  position: absolute;
}
body {
  position: relative;
}
.wrapper {
  display: table;
}
.circle {
  position: absolute;
  top: 25%;
  left: 25%;
  border-radius: 50%;
  width: 50%;
  height: auto;
  padding-top: 50%;
  background-color: #403C36;
  box-shadow: 1px 0.2px 25px 1px rgba(0, 0, 0, 0.25);
}
.content {
  display: table-cell;
  vertical-align: middle;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: auto;
  text-align: center;
}
<div class="wrapper">
  <div class="circle"></div>
  <div class="content">I want this to be centered vertically in the circle</div>
</div>

I can't put the text in the circle because of the circle's padding-top which keeps its aspect ratio at 1:1. However, if there's a way to get around that, I'd be fine with that.

Update

This cannot be addressed by assuming the width and height of the circle or the content since it is dynamic, based on the window's size, and user-contributed content. It's probably a paragraph or two of text.

Upvotes: 1

Views: 257

Answers (5)

sinisake
sinisake

Reputation: 11328

I think i got it, with two divs:

<div class="circle">
<div class="text">
TEXT multiline
will be
</div>
</div>

CSS:

.circle {

  border-radius: 50%;
  width: 50%;
  height: auto;
 padding-top:50%;
  background-color: #403C36;
  box-shadow: 1px 0.2px 25px 1px rgba(0, 0, 0, 0.25);
  position:relative;
}

.text {

  position:absolute;
  color:#fff;
  text-align:center;
width:100%;
 transform: translateY(-50%);

top: 50%;


}

Fiddle: https://jsfiddle.net/njngv3qk/

Upvotes: 1

frnt
frnt

Reputation: 8795

Change or add following properties into your class content.

HTML

<div class="wrapper"> <div class="circle"></div> <div class="content">I want this to be centered vertically in the circle</div> </div> CSS

.content {
  position: absolute;
  top: 92%;
  left: 25%;
  width: 50%;
  height: auto;
  text-align: center;
  transform : rotate(270deg);
}

Upvotes: 0

Harvey
Harvey

Reputation: 1408

You wouldnt need a wrapper div for this, just one div

HTML

<div class="circle">Hello, World</div>

CSS

.circle {
  width: 10%;
  height: 30%;
  padding: 30%;
  border-radius: 50%;
  background-color: #001100;
  text-align: center;
  color: #ffffff;
}

And, sorry I am unsure of how to create the 'snippets' part of my post.

EDIT updated ratios,

width 1:height 3: width 3

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115045

Something like this I would suggest

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle {
  width: 50%;
  padding-top: 50%;
  background: brown;
  border-radius: 50%;
  position: relative;
}
.content {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: pink;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center
}
<div class="circle">

  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, tenetur!</p>
  </div>
</div>

Upvotes: 3

ReshaD
ReshaD

Reputation: 946

You can insert the text (content) inside the (wrapper).

This could be a possible solution: jsFiddle

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
html {
  position: absolute;
}
body {
  position: relative;
}
.wrapper {
  display: table;
}
.circle {
  position: absolute;
  top: 25%;
  left: 25%;
  border-radius: 50%;
  width: 50%;
  height: auto;
  padding-top: 50%;
  background-color: #403C36;
  box-shadow: 1px 0.2px 25px 1px rgba(0, 0, 0, 0.25);
}
.content {
  position: absolute;
  top: 50%;
  left: 25%;
  width: 50%;
  text-align: center;
}
<div class="wrapper">
  <div class="circle">
    <div class="content">I want this to be centered vertically in the circle</div>
  </div>

</div>

Upvotes: 0

Related Questions