How to Vertically Align Text in a Paragraph

How do I vertically align text in a paragraph?

Try these styles:

p.event_desc {  font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;  line-height: 14px;  height:75px;  margin: 0px;  display: table-cell;  vertical-align: middle;  padding: 10px;  border: 1px solid #f00;}

<p class="event_desc">lorem ipsum</p>

How do I vertically align text in a div?

The correct way to do this in modern browsers is to use Flexbox.

See this answer for details.

See below for some older ways that work in older browsers.

---

Vertical Centering in CSS

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Article summary:

For a CSS 2 browser, one can use display:table/display:table-cell to center content.

A sample is also available at JSFiddle:

div { border:1px solid green;}

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

CSS - Vertical align text in absolute positioned paragraph

Get rid of the p tag. You already have it in a li anyway.

css

li {
position: relative;
float: left;
overflow: hidden;
}

img {
width: 100%;
height: 100%;
}

span {
background-color: rgba(0, 255, 0, .3);
position: absolute;
text-align:center;
width: 100%;
top:46%;
}

html

<ul>
<li><span>Lorem Ipsum</span><img src="http://www.placehold.it/300x200" /></li>
</ul>

Tested on window IE9 and Chrome.

Don't know if it was for the demo or not but if you want the red shade over the image make a class for a span tag then insert a new span with the class.

span.text {
background-color: rgba(0, 255, 0, .3);
position: absolute;
text-align:center;
width: 100%;
top:46%;
}

span.redshade {
background-color: rgba(255, 0, 0, .3);
width: 100%;
height: 100%;

<ul>
<li><span class="redshade"> </span><span class="text">Lorem Ipsum</span><img src="http://www.placehold.it/300x200" /></li>
</ul>

How do I vertically center text with CSS?

You can try this basic approach:

div {  height: 100px;  line-height: 100px;  text-align: center;  border: 2px dashed #f69c55;}

<div>  Hello World!</div>

CSS vertical-align paragraph into div

Vertical-align is not intended for aligning block elements.

Use flexbox for this

apply the following rule to the parent

div {
     display: flex;
     justify-content: flex-end;
}

then in another div wrap all elements but the paragraph you want to remain at bottom, and you're all set.

Vertically align text next to an image?

Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

Vertically align an image next to paragraph

Use display: inline-block; for vertical-align.

CSS

img {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}

.content-holder {
  display: inline-block;
  vertical-align: middle;
}

HTML

<div class="church-admin-calendar-widget-item">
  <img width="75" height="60" src="http://dummyimage.com/75" />
  <div class="content-holder">
    <p  class="ca_event_detail" >
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
    </p>
  </div>
</div>

DEMO

Vertical Align a Paragraph With Only HTML

Try vertical-align: text-top;

Here is an article on the vertical_align property if you have any more questions:
https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Vertically align two paragraphs on one line, one in center one on right

You can do it with the Flexbox and position property:

.container {  position: relative; /* needs to be on the parent */  display: flex; /* displays flex-items (children) inline */  justify-content: center; /* centers them horizontally */  align-items: center; /* and vertically */}
.container > .right {  position: absolute; /* needs to be on the child */  right: 0;}
@media (max-width: 480px) { /* adjust */  .container {    flex-direction: column; /* stacks flex-items vertically */  }  .container > .right {    position: static; /* back to default */    align-self: flex-end; /* aligns to the horizontal end */  }}

<div class="container">  <p class="center">Center</p>  <p class="right">Right</p></div>

---

Related Topics