I've gone through stackoverflow questions and a whole bunch of articles on vertically centering text like the following:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
None of the techniques seem to work with the latest version of Chrome. Is that just the nature of Chrome? My text just always appears at the top. It seems that whenever I use 50% or 100% as values for CSS's height or top, nothing happens.
I just need a single line of text vertically centered. line-height isn't helpful because I want it centered in the middle of the browser window... I don't know how tall the browser window is going to be.
UPDATE: The problem is apparently Foundation 4. Once I delete the following everything works as expected:
<link href="/assets/foundation_and_overrides.css?body=1" media="screen" rel="stylesheet" />
Any idea on how to make it work with Foundation 4?
I use various vertical centering methods regularly, and they still work in the latest version of chrome (31). You've probably overlooked some small detail - can you post what you've tried?
For example:
This technique uses a display:table-cell wrapper with vertical-align: middle; display: table-cell; element: http://jsbin.com/ofapiv/1/edit
And this technique uses a ghost element (a :before element with height:100% and both it and its sibling have vertical-align:middle): http://jsbin.com/uqutol/4/edit
And this is the ghost element technique simplified to center just a single line of text: http://jsbin.com/ubUxOgO/1/edit
<!DOCTYPE html>
<title>Centered line</title>
<style>
html { height:100%; }
.singleline {
position: absolute;
top:0; left:0; right:0;bottom:0;
text-align:center;
}
.singleline:before {
height:100%;
vertical-align:middle;
position:relative;
content:'';
display:inline-block;
}
</style>
<div class="singleline">This is a centered line!</div>
Related
When trying to resize my webpage horizontally everything works out fine. When I try to resize the page vertically the divs start overlapping and the whole webpage looks weird. What could I try to fix this?
.container-1-wrapper
{
width:100vw;
height:100vh;
background: #3399FF;
}
.container-2-wrapper
{
width:100vw;
height:100vh;
background: #f9f9eb;
}
<div class="container-1-wrapper"></div>
<div class="container-2-wrapper"></div>
I would recommend adding this to your styling on that section:
.container-1-wrapper
{
width:100vw;
height:100vh;
background: #3399FF;
position: relative;
display: block;
clear: both;
}
This will put your code in a block format that's relative to the content surrounding it as well as clearing any text/elements on both sides of the page. I highly recommend this if you can (or are able to) float your elements to one side. If you code a float into your elements, this will keep your divs from running into each other. It should clear out both sides of the div element.
Also, if you're attempting to resize your page to format to another device, maybe this code snippet will help you out:
<meta name="viewport" content="width=device-width, initial-scale=1">
Put this at the beginning of your CSS right under the declaration of font type and such (in the section for metadata). This should make your page so that it always scales up and down with the size of your window.
With the little information you can only guess:
Try to apply a position: relative and display: block to the wrapper
I'm trying to figure out how to make my homepage similar to my business card, seen here without the text: http://katiehambor.com/images/businesscardexample.png
I want the webpage to have this cropped circle to mimic my business card, and at almost any browser size the background image (diagonal stripes) will still be seen on the left and right.
Basically the top and bottom of the circle should be cropped and the left and right should be exposed so that the background image is shown (not shown on this codepen). I want it to be responsive so if someone makes their browser smaller, the circle will still be centered. I also do not want to be able to see the bottom of the circle, since right now if you scroll down you can see the bottom edge.
There will not be a lot of text in the circle, so there's no need to worry that all the text will fit inside.
I also want this site to be responsive so that for horizontal screens it will look like this, but on vertical screens the whole circle will probably be shown. I don't need to figure this out though because I know how to see the full circle, as my problem is with cropping the circle, but it's just something to keep in mind.
Also there will be a text div within the circle—right now it just says 'text' and I made it transparent for reference. I know this might need more divs to accomplish, but I don't really know where to go from here.
Please let me know if there's anything I can clear up about my question—sorry if it seems confusing!
Edit: Below is my first try, but it has been changed so it can now be seen here.
/*original on: http://codepen.io/mezzotessitura/pen/kfenK */
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Katie Hambor</title>
<style>
body {
text-align: center;
background-image:url(images/background.jpg);
background-size: auto;
color: black;
}
.box {
background-color:#00a886;
padding:5px;
top:-10%;bottom:0;left:15%;right:15%;
width:55em;
height:55em;
position:absolute;
border-radius:50%;
}
.textbox {
height:auto;
margin:5em;
position:absolute;
top:0;bottom:0;left:0;right:0;
background-color:#fff;
opacity:.25;
}
</style>
</head>
<body>
<div class="box">
<div class="textbox">
<p>text</p>
</div>
</div>
</body>
</html>
try background-size:cover on the body. but I would make it cross browser friendly.
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
This should work better for you. http://codepen.io/anon/pen/utkbF
Using css to create the circle:
.box{
border-radius: 50%;
background-color:#00a886;
margin: auto;
}
I received an answer on Reddit here.
Uses vw to accomplish the responsive aspect. And transform for centering it (from this css-tricks article). I used position: absolute instead of fixed, but both do the same job in this case because div.box is positioned relative to the body.
For the past few days, I've been struggling with some odd spacing on a website I'm building. Originally, I thought it was a display issue with Chrome, but I've been able to duplicate the problem in IE8, IE9, Firefox and Safari. I'm using old school HTML/CSS for backwards compatibility, so I can say it's not IE handling of HTML5 or some other bleeding edge update.
While some of the solutions on line have led me to try different things including floating the hedad, nothing's been successful & I always have padding on one of the long sides.
I have stripped this down to the BAREST of essentials to reproduce the problem, and have included a screen shot of the padding I can see on my end. I would certianly appreciate another set or seven of eyes showing me what I missed.
EDIT: line height turned out to the the culprit on this one, but vertically aligning the image to top per suggestion left the text at the top of the div. My sense would be that the header tag would preserve the default value, but that the and the img tag within the header would override that. Or can I only have one vertical align per div?
Second, is there a way to collapse line-height with CSS?
HTML CODE
<html>
<head>
<title>Test</title>
<LINK rel="stylesheet" href="test.css">
</head>
<body>
<div id="header">
<img src="bluespacer.gif" height=125 width=400>
TEST
</div>
</body>
</html>
CSS CODE
#header {
font: serif;
color: blue;
background-color: gray;
}
My output looks like below
and here's the bluespacer.gif; 1px x 1px. Look close, it's like a dust speck!
( ) <---
You're looking at the wrong spot. It's not padding but line-height, that generates that white space.
Try to vertically align the image:
#header img {
vertical-align: bottom;
}
Explanation: In the default style, the image is placed on the baseline of text. That is, the lower edge aligns roughly with the lower edge of, say, the letter 'x'. But because text has descenders (like 'g' or 'j'), the surrounding box is drawn higher, which leads to the extra space below the image.
It's a weird issue. You can do this.
#header img { line-height: 0; }
#header img {
display: block;
}
I have a simple HTML button which contains text and an image:
HTML: (Already on http://jsfiddle.net/EFwgN)
<span class="Button">
<img src="http://www.connectedtext.com/Image/ok.gif" />
Small Icon
</span>
CSS:
span.Button {display:inline-block; margin:2px 4px;padding:3px 6px;
background-color:#ddd; height:24px; line-height:24px;
vertical-align:middle;}
span.Button img {vertical-align:middle;}
I can't come up with a combination that would fit these requirements:
The image and text need to be vertically at the middle of the div, with the text in the middle of the image. It should be neat.
Horizontally - the image may be in any width, and the button should grow to show it.
Vertically - the image may be in any height, smaller or larger than the button. When the image is larger, I don't mind if the extra pixels are displayed or cropped, as long as it is centered.
The button is in a fixed height. Currently I use line-height to center the text.
The button should sit nicely in line with other buttons and text.
The solution needs to work on all latest versions of major browsers, and Internet Explorer 8.
Here's a jsfiddle with my current code: http://jsfiddle.net/EFwgN
(note the small icon is slightly below the center of the button)
A simple solution, if you need no less than IE8 (in Standards mode): http://jsfiddle.net/kizu/EFwgN/31/
Just add margin: -100px 0 to img, so the negative margin would eat any large height:
span.Button img {vertical-align:middle; margin:-100px 0;
position:relative; top:-2px;}
I've added position: relative; top:-2px; just to look it better :)
But if you'll need support for compatibility mode or IE lt 8 (for some reason), the thing with margin won't work. So you'll need an extra markup: http://jsfiddle.net/kizu/EFwgN/28/, but it's somewhat hacky and works only with the fixed button's height (like in your example).
Use table-based display. Requires shrinking of image due to conflict between display:table-cell; and height:24px. Very similar to your aborted attempt from the comments, but includes the required display:block; on the image: http://jsfiddle.net/shanethehat/5ck3s/
There you go, using jQuery:
$(".button img").load(function()
{
$(this).each(function()
{
sh = $(this).outerHeight();
if (sh > 24){
alert(sh);
$(this).css("margin-top", - (sh - 24) / 2 + 'px');
}
});
});
Edit: Just saw that you wanted it pure CSS, well, here's to the code gulfers out there! :)
Why not make the image shrink in the case where it is indeed taller than the button?
span.Button img {
vertical-align:middle;
max-height: 100%;
}
I probably missed some of the requirements, as setting span.Button's height to auto did the trick for me.
If what you wanted is button growing only horizontally, with vertical overflow cropped, than maybe I'd do it like this:
span.Button {display:inline-block; margin:2px 4px;padding:3px 6px;
background-color:#ddd; width:auto; height:24px; line-height:24px;overflow:hidden;
vertical-align:middle;
}
using a bit of javascript to determine img height, and then center it accordingly.
How about... this?
http://jsfiddle.net/92K8J/
Added display:inline-block to the images, and removed the fixed heightof the container.
I don't understand why FF and Chrome render my page differently. Here's a screenie of it in
firefox: firefox example http://grab.by/65Bn
and here's one in chrome
chrome: chrome example http://grab.by/65BB
fieldset has a relative position and the image has an absolute position.
here's the basic structure:
<fieldset class="passenger-info">
<legend>Passenger 1</legend>
<div class="remove-me">
<img src="/images/delete-icon-sm.png" />
</div>
</fieldset>
basically the image is declared right after the legend.
here's the css for fieldset:
.passenger-info {
background:none repeat scroll 0 0 #F2F2F2;
border:1px solid #9D240F;
display:inline;
float:left;
margin-bottom:10px;
margin-right:10px;
padding:3px 10px;
position:relative;
width:350px;
}
and for the remove-me image:
.remove-me {
border:1px solid red;
position:absolute;
right:0;
top:0;
}
it's totally weird. I tried putting the fieldset padding out, and the image moves up a little, but still not at the corner.
This post shows that FF does indeed have problems with rendering fieldsets.
http://www.codingforums.com/showthread.php?t=132624
Is there a better way of doing a fix without using a browser specific hack?
I can't believe this is 4 years old and still not answered. I searched every where for this answer. Here is what I did to use position absolute on an image within a fieldset. From here, change your right and top positioning to make it work for you in Firefox. (leave your original class in place for IE, Chrome, Safari, Opera)
#-moz-document url-prefix() {
.remove-me {
border:1px solid red;
position:absolute;
right:0;
top:0;
}
}
This is a Firefox Hack that I'm told works for every version of Firefox. I'm using Firefox Version 33.0.2, so I can't confirm this works on older versions. I had the same problem on my site. It looked the same in IE, Opera, Safari, and Chrome. It was only in Firefox I noticed the positioning different. This works!
It appears that Firefox has an invisible padding or margin that places the element at the top right of the text space. Chrome is placing the element at the top right of the fieldset element outside of the flow of text.
One thing you could do is add a div wrapper and then absolutely position the element in the top right of the wrapper so that it lays over the corner of the fieldset.
It appears that the .remove-me element might have margin. Make sure to to remove that prior to adding absolute-positioning to items.
For precise results, you should always do a 'reset' in your CSS. This means removing margin/padding from every element.
A simple reset:
* { margin: 0; padding: 0px; }
Put that at the top of your CSS.
I have used #media screen and (-webkit-min-device-pixel-ratio:0) {} and fixed my absolutes that way. Its not very dry but it works.
I think it is because you didn't indicate the height of the div (passenger-info) that contains the button; Chrome starts acting up when you don't specify this.
The real solution is firefox and ie don't set defaults for top, left, right, and bottom.
I was able to fix my problem by setting these properly.
Instead of using margin use left, top, right, bottom. Example:
position: absolute;
top: 10px;
left: 20px;
Using a feature query against one of mozilla's platform-native properties is probably the correct approach for this in 2020. -moz-appearance is one such property, but others would work as well.
#supports (-moz-appearance: none) {
.remove-me {
border:1px solid red;
position:absolute;
right:0;
top:0;
}
}
I had a similar problem with a web site and the images in Chrome where wrong. I had the position in an image and an input box in the same way as your example at the beginning of this post, and I solved it by putting the absolute position in the input box and in the image position in relative coordinates.
When I do that, it changes both positions but puts margins in both. I got it where I want it, to solve this problem with Firefox an Chrome you have to follow some of these tricks in order to put the images in the right place. Play with the position to make it work.