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
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;
}
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?
Add to your code:
display: table-cell;
vertical-align: middle;
You will need to adjust your padding. That should work.
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/
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?
Related
I'm trying to build a 'table' with CSS but I'm having trouble getting some of the <DIV>s to fill the width of the layout if the content is too short.
It's difficult to explain in words so here's a fiddle:
https://jsfiddle.net/fatmonk/r2sodp7p/
Basically I don't want to see the pink bit in the example - I want the light blue box to expand to fill the width regardless of how much or how little content is in it.
Using display: table-row does the right thing with regards filling the line, but doesn't allow a border to be set.
(The fiddle isn't the whole page - there are more 'rows' to add and the whole 'table' will be repeated with link sand link code and other bits and pieces.)
It's quote possible that in the process of trying to get this working I've over-complicated the HTML as well - I've ended up adding container <DIV>s to try to force the width, so it may be that the HTML needs trimming down as well, but I've run out of ideas.
Remove width:auto from the inline style tag of all .menuContentInPopup and add width: 100% to it in your css, so
<div id="poster2" class="menuContentInPopup" style="width: auto;">
would become
<div id="poster2" class="menuContentInPopup">
And the css:
.menuContentInPopup{
display: table;
height:auto;
border: 1px solid rgba(99,99,99,.75);
border-top: none;
background-color:rgba(235,245,255,1);
padding:5px;
font-size: 10pt;
text-align: justify;
left: 0px;
right: 0px;
float: none;
width: 100%;
}
Here a fiddle showing the result: Fiddle.
I have also adjusted the box-sizing of all elements so that adding padding to the elements does not make it overflow its parent when width is 100%, this is achieved by
* {
margin: 0;
padding: 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
box-sizing: border-box;
}
i might understood it wrong but here is how i would fix it.
[Fiddle][1]
I changed the width to 100% so it will fill your full div. Also removed the width: auto in the HTML.
[1]: https://jsfiddle.net/r2sodp7p/10/
FYI, another clean solution for your case here:
[http://jsfiddle.net/giaumn/f99ub6ro/]
You just need to care about 2 properties:
overflow: auto;
on .menu-content and
float: left;
on .poster-thumb
set your width:auto; to width:100%; and add width:100%; to menuContentInPopup class. remove width:auto from html inline styles.
fiddle
I'm having problems with a 2-column layout, using display-style="inline-block".
I have this html:
<div class="A">tekst</div>
<div class="B">tekst</div>
with css:
.A {
background-color: blue;
height: 200px;
width: 250px;
padding-left: 25px;
margin-right: -254px;
display: inline-block;
vertical-align: top;
position: relative;
box-sizing: border-box;
z-index: 1;
}
.B {
background-color: red;
height: 400px;
width: 100%;
padding-left: 300px;
display: inline-block;
vertical-align: top;
position: relative;
box-sizing: border-box;
}
http://jsfiddle.net/eaFn9/9/
But as you can see, the width of the first div is 250 pixels, but it needs a margin-right of -254px before the second div is shown "next" to it.
Why is this? I cannot figure it out. Also, most examples do not use the box-sizing, but if I remove it, the layout goes awry again.
I am using Chrome, but it seems to work the same in FF and Safari too.
Any help is greatly appreciated!
Regards,
Michael
After some attemps to find the problem, I bet you have some blank or even some Enter keystroke between the 2 divs. This problem is very hard to find out. So to solve it you just need to clear all that blank or Enter keystroke so that the 2 div tags have to be close next to each other:
<!-- place 2 divs close to each other without anything between. -->
<div class="A">tekst</div><div class="B">tekst</div>
Here is the expectedly working fiddle
For anybody with the same problem:
It seems that adding 'font-size: 0' to the parent container fixes it for every browser, just not for Safari for Windows (all other Safaris work as expected).
Make sure that you reset the font-size to a sensible value inside the child divs if you want to have text in them (so in my example, both divs A and B would have font-size: 14px; for instance to show the text).
I assume (I have not done any research at all) this is a bug in Safari for Windows, as it's the only Safari with this issue.
sorry if the question title is weak, i can't quite sum my problem up into one snappy tagline...
I'm working on a website (using Joomla) and i've had to insert a DIV serving as a sidebar on the right side of the page. in order for it to be displayed "above" (or "over", i mean on the z-axis) the regular page content, i'm using a negative margin on the left side of it, covering the whole width of it, so it will simply float to the right and sit there, which works fine in ff and IE.
Since i've rarely ever run into issues with Chrome that were fine in IE, i didn't bother to check until quite late:
Now i see that in Chrome, the div is just sitting below (at the bottom of) the regular content; despite the "inline" display-types and the negative margin.
Now I've tried ridiculous things to make it work, but for some reason it just won't.
Can someone tell me how i can get it to work in Chrome?
HTML:
<div class="cframe">
<div class="content">
...
</div>
<div class="sideright">
...
</div>
</div>
CSS:
div.cframe {
display: table;
vertical-align: top;
}
div.content {
display: inline-table;
width: 751px;
padding: 60px;
}
DIV.sideright {
width: 200px;
float: right;
display: block;
position: relative;
top: 320px;
margin: 0px 0px 0px -200px;
}
...this is what i'm stuck with right now, it's all quite ugly.
[link to live-page removed as the solution has already been applied]
(The sidebar is the div classed sideright, and contains a module titled Archiv)
Thank you in advance
Change the div.content css to:
div.content {
display: inline;
float: left;
}
You're using float, but then setting the position to relative. You should remove the relative part of your css for the siderright and it should fix the issue
Edit: even better you should change the position to absolute.
Set your container div to position:relative and then position:absolute your sidebar in relation to that.
.cframe {
display: table;
vertical-align: top;
position: relative;
}
.sideright {
width: 200px;
position: absolute;
top: 320px;
right: 0;
}
I didn't test the answers above but I take their word that they worked. However, your question caught my eye, because I thought you were looking for a browser hack.
There are ways that you can tell an element to behave differently on a specific browser. This happens sometimes across browsers and the best way is to hack each individual browser and give them specific instructions. For chrome, of course you'll have to use a webkit.
This would be an easy example of the syntax to follow:
<p>TEST</p>
p {color:green;}
#media screen and (-webkit-min-device-pixel-ratio:0) {
p {color:red;}
}
Try the DEMO in several browsers and notice how only chrome will display it in red
Is there any way to get the content text of a div to the bottom of it?
Here I've prepared an example.
http://jsfiddle.net/JGuP7/
This is the sample hierarchy:
<div class="button">Button Label</div>
I'm trying to achieve the result without adding additional spans or changing the hierarchy.
Three possible solutions, although each has its own caveats.
jsFiddle demo
The first solution relies on line-height: 220px; vertical-align: bottom; to align the text with the bottom of the DIV. The second solution creates a :before psuedo-element that pushes the text to the bottom of the DIV (this requires no additional markup). Both solutions will fail in IE7 or earlier, and both will have issues if:
The font size changes
The text wraps to a second line
The size of the containing element changes
The third solution relies on the display: box; property, which is a CSS property that is being phased out (more details at Quick Hits With the Flexible Box Model). This solution is only supported by Chrome since v4, Firefox since v2, and IE10 beta. However, a new Flexbox standard has been standardized, but browser support is minimal. This solution could be considered "too new" to be used effectively (html5please.com/#flexbox).
Generally speaking, you should consider a new wrapping element around your text which will allow for position: absolute; bottom: 0; to cozy the element to the bottom of the parent element. This has the benefit of growing the child element upwards as the font size or text length increases, and is agnostic to the parent container's dimensions. Depending on how mission critical your positioning is to your layout, you could add this new element using Javascript. This probably isn't ideal given the question you've posed, but browser support isn't less than ideal for the more wacky CSS solutions I've listed above :-p
Another way to to do this would be by using "display: table-cell" and "vertical-align: bottom".
http://jsfiddle.net/JGuP7/1/
.button {
display: table-cell;
background-color: darkred;
color: white;
width: 120px;
height: 120px;
text-align: center;
vertical-align: bottom;
}
If you use position:relative in the container, and use
position:absolute;
bottom:0;
in the content, you can achieve the desired result.
Your CSS might look like:
.button
{
display: block;
background-color: darkred;
color: white;
width: 120px;
height: 120px;
text-align: center;
position: relative;
}
.bottomContent
{
position:absolute;
bottom: 0;
}
and your HTML:
<div class="button"><p class="bottomContent">Button Label</p></div>
Source
Everything online points me to stop using tables, which I've tried my best to do, but I've come across a problem which tables seems to be the only solution for. I have 5 inline-block elements that I want spaced evenly across 100% of the width of the page. I put a width of 20% on the style and set the margin and padding to zero. When I view the page, everything looks pretty good except for the horizontal scrollbar added to the page. If I put these elements in a 100% width table with 5 columns this isn't a problem. In this case do I need to use a table or is there a better solution?
BTW, I've tried this in both Chrome and IE8.
Update: Something I've discovered is that a ~5px gap is being inserted between my elements (found by putting a background-color on them). I have no clue why, as nothing in my styles denotes this:
<div class="links">
Previous
Current
Next
01/01/2011
01/08/2011
</div>
.links
{
white-space: nowrap;
width: 100%;
}
.links a
{
display: inline-block;
width: 20%;
padding: 0;
margin: 0;
color: White;
background-color: #4C8331;
}
Another update:
After JMC Creative pointed out my dumb mistake of putting spaces between the anchors that almost fixed the issue, but now there is one pixel of scrollbar. I see no inherited style that should cause this.
Try putting them in a container. Like so:
#container {
margin: 0;
padding: 0;
width: 100%;
}
#boxes {
float: left;
width: 20%;
}
Your html markup has a space in between the a tags. So therefore it's being rendered as 5 blocks which are 20% wide and 4 spaces of roughly 4px each. So you end up with 100% + 16px.
Edit
In order to solve the scrollbar that is plaguing you in IE, you could set up a conditional comment like so:
<!--[if IE]>
<style type="text/css"> .links { overflow: hidden; } </style>
<![endif]-->
Be sure your body and html set to margin: 0; padding: 0;.
Have you tried using overflow: hidden? Or more specifically overflow-y: hidden?
You want to float your anchors. Doing it this way works for me.
CSS:
.links {
width: 100%;
}
.links>a {
float: left;
display: inline-block;
width: 20%;
padding: 0;
margin: 0;
color: #fff;
background-color: #4C8331;
}
HTML:
<div class="links">
Previous
Current
Next
01/01/2011
01/08/2011
</div>
You may get a scrollbar or see some of the anchors wrapped to another line if there isn't room to fit them all on the page (ie, content overflows the width). I will note that I have seen IE get this wrong and incorrectly wrap when it shouldn't. It seems like a rounding issue and could be worked around.