0

I want to know is there a way to centre text vertically without the use of a container element. something which is responsive.

EDIT the only value I would know is the height of the h3 element, nothing more, content will appear underneath some as

etc

CSS

h3 {
 height: 140px;
 padding-top: 80px;
 min-height: inherit;
 border: 1px solid black;
 text-align: center;
}

HTML

<h3>TEST</h3>

Here is an example of what i want to achieve codepen test

Karl Doyle
  • 642
  • 3
  • 10
  • Your example doesn't show it vertically centred... The padding gives the push from top. You could investigate using position absolute and relative and top: 50% – Kinnectus Jun 24 '14 at 21:08
  • as i understood you want to directionate your text, aren't you??keeping it centered, isn't it?? – MickyScion Jun 24 '14 at 21:14
  • @BigChris - yes the padding is the illusion, the problem with position absolute is that content follows it – Karl Doyle Jun 25 '14 at 11:23
  • @MickyScion - I want to define the

    as a block element with a border and then center the text within the element intself without the need of an additional div

     – Karl Doyle Jun 25 '14 at 11:24

5 Answers5

2

Line-height is a beautiful thing, especially if its just text. And if you want to be responsive:

h3 {
  background-color: transparent;
  height: 40vh;
  line-height: 40vh;
  min-height: inherit;
  border: 1px solid black;
  text-align: center;
}
Kaceykaso
  • 240
  • 4
  • 11
  • 1
    Thank you, this is for sure the simplest solution, I'm curious why I didn't use initially now :) – Karl Doyle Jun 25 '14 at 11:34
  • 1
    This is why I love this site so much. I had no idea no idea that you could size something based on the viewport. Still limits you to one line. Wow. I have a lot of templates that need updating now. – Knyri Jun 26 '14 at 13:12
  • Yea, viewport sizing is my goto now. I try not to even use media queries if I can help it :P – Kaceykaso Jun 26 '14 at 18:14
1

There is no easy way to do this. I have come up with a couple techniques over the years.

You have 80px in padding and a height of 140px for a combined height of 240px. If you know that the text will not exceed one line you can do it using line-height.

h3{
    line-height:240px;
    ...
}

Another way is to use padding if you know the height of your text.

h3{
    font-size: 20px;
    line-height:20px;
    padding:110px 0;/* (240-20)/2 */
    ...
}

note: I don't like the display: table-cell hack and have yet to need it. Why move away from a table based layout if you're just going to tell the browser to treat the element as a table?

Knyri
  • 2,968
  • 1
  • 17
  • 24
  • yeah is not very easy, but the problem i am having is that the website is responsive and with all the break points, and various

    elements I am looking for something which requires the least amount of configuration in regards to line-height, padding, etc

     – Karl Doyle Jun 25 '14 at 11:27
0

Add to your code:

display: table-cell;
vertical-align: middle;

You will need to adjust your padding. That should work.

doodelicious
  • 642
  • 1
  • 5
  • 12
0

You're going to have a containing element, regardless. It's just that the body might be the container.

You could do this: 

body {
    height:100%; 
    display: table;
    margin: 0px;
    padding: 0px;
}

h3 {
    display: table-cell;
    vertical-align: middle;
}

OR...

body {
    height:100%; 
    margin: 0px;
    padding: 0px;
}

h3 {
    position: relative;
    top: 50%;
}

edit - removed width specific styles as it has nothing to do with the solution. Thanks to Jason for the margin/padding set to 0px to remove ugly scrollbars. Jason also noted that this solution did not work for Chrome unless the "body" element in the styles was changed to "html, body", but I was not able to replicate this problem using Chrome version 35.0... For good measure I also opened a test page in Safari and Firefox and they also worked as expected.

edit^2 - Figured out the problem Jason saw. If you use the html5 doctype, then, yes, you will have to include the html element with the body style. This also makes the scrollbar reappear in the relative position solution. So that's fun. I will leave this up for the purpose of saving frustration in the future, but I would check out the link provided in Jason's solution.

http://phrogz.net/CSS/vertical-align/

How can I vertically center text in a dynamically height div?

Community
  • 1
  • 1
PopeDarren
  • 162
  • 1
  • 8
  • 1
    Neither method works properly in Chrome. Change "body {" to "html, body {" to yield working solutions. In addition, you will likely want to add margin: 0; and padding: 0; to the body to remove superfluous padding which adds scrollbars... – Jason Jun 24 '14 at 21:55
  • i think this is too complicated, the layout im working with is pretty complex, – Karl Doyle Jun 25 '14 at 11:36
0

This article provides 6 different methods and their associated pros and cons; it explains it far better than I could here. The solutions provided as answers here are good, but the article really covers niche cases and allows you to choose the best method to fit your needs.

http://www.vanseodesign.com/css/vertical-centering/

Jason
  • 4,079
  • 4
  • 22
  • 32
  • Sorry, but i have read this and these ALL use an additional element to center the text, I am looking for a solution which requires no additional element – Karl Doyle Jun 25 '14 at 11:25