Html div align text middle

How to align text in middle (vertically)

I am struggling with this many hours now and still I can’t find a solution. I’ve made this nice grid that adjusts with text length and browser resising. The problem now is that I can’t get text go the middle of the box. I’ve tried everything.. I used several properties in order to achieve this but nothing worked.

text-align: center; vertical-align: middle; line-height: "same as div"; 

3 Answers 3

       
sometext
 
somemoretext somemoretext
 
sometext
 
sometext
 
 
somemoretext somemoretext somemoretext somemoretext
 
sometext
 
  

this is done with flex as ur jsfiddle. u can do it also easier with «parent display table and vertical align middle» and «child display table cell and van middle» removing ur flex styles.

Seems pretty good!! May I ask if this will work in most browsers ? 🙂 Thank you so much for your input 🙂

u can check here for the css compatibility! my opinion is tha flex is supported on many browsers and frameworks and i think its safe to use.. your rest css seems ok.

If you do not care that divs with multiple lines of text adjust their height to actual text content, use height:100% on your child elements.

If you need all your content to stay the same height, add

// Use any fixed value line-height: 50px; height: 50px; 

If you need to change your fixed height in pixels whenver your window is resized, just use javascript to change the CSS rule (if using this method read this first to not slow down your client when the window gets changed).

Источник

CSS to vertically align text to middle of div

What is the correct way to force text in a div to vertically align to the middle? I have found a couple ‘tricks’, but I need something that works with a single line and multiple lines. Hopefully I am missing something stupid simple: http://jsfiddle.net/rogerguess/DawFy/

.header < display: inline-block; text-align: center; width: 123px; background: green; border-radius: 4px 4px 4px 4px; height: 80px; vertical-align: middle; > 
test1
 
some text that will wrap
 
test3
 
 

Thanks Clive, but unfortunately table cell jacks up everything around it for some reason. I posted only a small portion of what I am doing on the page.

kept playing with it.. and got table-cell to work. The issue was that table cell seems to ignore margins, so I added additional columns for the margins I wanted. Thanks

If you’ve provided an element with a display type of table, rather than allowing the browser to insert an anonymous one, you can use the border-spacing property (it goes on the table element, not the table-cell). developer.mozilla.org/en-US/docs/CSS/border-spacing

6 Answers 6

Change display: inline-block; to display: table-cell;

For the benefit of new readers of this answer, modern browsers now implement Flexbox very well. See w3schools.com/css/css3_flexbox.asp

If your multi-line elements need to wrap for responsive reasons, then your best bet is with Flexbox. Due to the flakiness of Firefox’s 2009 Flexbox implementation, it has to be handled slightly differently than you would do it for modern Flexbox implementations.

All these Codes just to bring text in the Middle. that’s why I miss

It’s a byproduct of browsers implementing rough Flexbox drafts where property names have not been finalized on top of everyone prefixing everything. Realistically, all you should need is display, justify-content, and align-items.

I realize that it’s a lot of code, but this answer is perfect. It uses newer properties while also covering legacy browsers. +1

I’ve made a quick example for you, using display: table-cell property on the parent div.

 #outer < height: 100%; overflow: hidden; position: relative; width: 100%; display: table; position: static; >div.greenBorder < background-color: #39B9FF; text-align: center; color: white; >#middle[id] < display: table-cell; position: static; vertical-align: middle; width: 100%; >#middle

Most of these solutions wouldn’t work for me because either the height was manually specified (which I couldn’t do) or things like inline-block and float would remove the ability for the an inner div to inherit the parent div’s height. I ended up creating a table with two columns each containing my divs and then I had no issues vertically centering text.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.26.43545

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

How to vertical align text in the middle without changing size of a div

I need to make the text «Hello world» in the left box as (vertical) middle. If I change CSS .red-banner .text < background: rgb(32,56,100); color: white; padding-top:8px; >then «Hello world» will be shifted a little bit down, but the black background will be shifted also and overlap the below banner.
So how can I align the text inside the box vertical middle without changing the size of the black background? (the content of the text is maximal 2 lines).

#parent < overflow: hidden; margin:0px; >.right < border-left: 2px solid; border-color: rgb(215,217,216); padding-left: 20px; float: right; width: 270px; >.left < margin: 0px; overflow: hidden; height: 100%; >body < margin:0px; font-family: Calibri; >header20 < font-size: 16pt; >#inner < margin-left: 10px; width:730px; margin: 0 auto; >.banner < position: relative; >.banner .text < position: absolute; top: 0; left: 0; width: 250px; height: 100%; display: none; >.banner:hover .text < display: block; >.red-banner .text < background: rgb(32,56,100); color: white; >.green-banner .text

Hello world.

Hello world, this is a test message for the effect.

This is a table

  
First point
  
Second point
  
Third point


This is another table

  
First point
  
Second point
  
Third point


This is the title of the page - bla bla bla 
Timetable for the next month
The first line of the content
The second line of the content
The third line of the content

Источник

How do I vertically align text in a div?

I am trying to find the most effective way to align text with a div. I have tried a few things and none seem to work.

 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 

34 Answers 34

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

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

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

A sample is also available at JSFiddle:

 
 
 
everything is vertically centered in modern IE8+ and others.
 
 

It is possible to merge hacks for old browsers (Internet Explorer 6/7) into styles with using # to hide styles from newer browsers:

 
 
 
everything is vertically centered
 
 

It is quite ludicrous that tables are frowned upon as some kind of old-fashioned hack only a newbie would use, and here we are using «display:table-cell» in a DIV as a far hackier workaround.

@Desty I thought the same thing until I started working on accessibility. It wasn’t until I saw how screen readers do their thing that I started to accept this ‘new’ way of thinking.

@MarcelWilson I would have thought screen readers would find it easier to reason about simple tables. I know there’s the aria-. attributes that can help when using divs to simulate tables, but surely that’s like spraying air freshener on a dog turd instead of removing it.

You need to add the line-height attribute and that attribute must match the height of the div . In your case:

In fact, you could probably remove the height attribute altogether.

This only works for one line of text though, so be careful.

Here’s a great resource

Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation.

Using Flexbox

Inline with keeping this post up to date with the latest tech, here’s a much easier way to center something using Flexbox. Flexbox isn’t supported in Internet Explorer 9 and lower.

Here are some great resources:

• Some Text

• A bit more text that goes on two lines

• Even more text that demonstrates how lines can span multiple lines

Another solution

This method isn’t supported in Internet Explorer 8 and lower.

• Some Text

• A bit more text that goes on two lines

• Even more text that demonstrates how lines can span multiple lines

Previous answer

A simple and cross-browser approach, useful as links in the marked answer are slightly outdated.

How to vertically and horizontally center text in both an unordered list and a div without resorting to JavaScript or CSS line heights. No matter how much text you have you won’t have to apply any special classes to specific lists or divs (the code is the same for each). This works on all major browsers including Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Opera and Safari. There are two special stylesheets (one for Internet Explorer 7 and another for Internet Explorer 6) to help them along due to their CSS limitations which modern browsers don’t have.

Andy Howard — How to vertically and horizontally center text in an unordered list or div

As I didn’t care much for Internet Explorer 7/6 for the last project I worked on, I used a slightly stripped down version (i.e. removed the stuff that made it work in Internet Explorer 7 and 6). It might be useful for somebody else.

.outerContainer < display: table; width: 100px; /* Width of parent */ height: 100px; /* Height of parent */ overflow: hidden; >.outerContainer .innerContainer < display: table-cell; vertical-align: middle; width: 100%; margin: 0 auto; text-align: center; >li

Источник

How to keep text inside a div, always in the middle?

I’ve tried to make a Class to contain the text with the «margin-top and margin-bottom» both on auto, but doesn’t work.

You mean you want the text vertically centered? Thanks to the W3C’s infinite intelligence, that’s impossible with standard CSS and requires multiple hacks, workarounds, and extra markup.

5 Answers 5

If you don’t care about IE7 support, you can do it like that:

#wrap < /* Your styling. */ position: absolute; z-index: 999999; right: 0; height: 60%; text-align: center; /* Solution part I. */ display: table; >/* Solution part II. */ #inside

If you’re OK with JavaScript you can try this jQuery plugin: http://centratissimo.musings.it/ but since it also doesn’t seems to support IE7 the CSS solution is probably better.

Perfect! Thank you very much! It’s exactly what I need, and as always expected that IE will have some problems.. lol. Thanks man.

Flexbox has really changed the game with aligning elements in a fluid manner. Define your container element to be display: flex and then to align your inner children you would use justify-content: center; align-items: center;

.container < position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; >.parent < height: 500px; width: 500px; position: relative; > 
 
Hello
 
World
 
 
 

You’ll notice that «Hello» and «World» will both be vertically and horizontally centered within the .container element.

Replace height: 60%; with padding: 30% 0; .

If you want the text to be horizontally centered in a div, ‘text-align:center;’ is your friend. If you want it vertically centered; wrap the content inside an inner div, and then use ‘margin: auto’ for that inner div. Of course, you’ll have to give the inner div a width; otherwise, the horizontal center won’t work.
‘valign=»middle»‘ also works in tables if tables are an option (otherwise discouraged)

Источник