CODEWITHSUNDEEP
htmlcss
Sanjna Malpani
Sanjna Malpani

Reputation: 175

Centre text at % with css

If I use text-align: center; then I can centre text like enter image description here

But I want to centre the text at 75% or X% so that I achieve this:

enter image description here

How can I achieve this with css?

EDIT:

using left: 75% or margin-left: 75% renders something like this:

enter image description here

Upvotes: 0

Views: 96

Answers (2)

Quentin
Quentin

Reputation: 944169

Put the content in a container with a left margin of 50%, then centre it inside that.

body { margin: 0; padding: 0; }
div { text-align: center; margin: 0 0 0 50%;
border: 1px solid #00c; }
<div>Example</div>

Upvotes: 5

Pete
Pete

Reputation: 58462

You can use a mixture of margin and translateX:

.measure {
  width: 75%;
  border-right: 1px solid red;
  box-sizing: border-box;
  height:10px;
}

span {
  margin-left: 75%;  /* your 75% */
  transform: translateX(-50%);   /* centered */
  display:inline-block;
}
<div class="measure"></div>
<span>75%</span>

Upvotes: 7

Related Questions