Consider following example:
http://jsfiddle.net/AsGk4/
As you can see the two boxes overlap instead of being positioned next to each other with float:left property. When I remove the child .text DIV, the boxes appear as they should. I assume this behavior comes from .text 's position:absolute property, but why does this have impact on parent DIV's appearance?
HTML
<div class="box">
<div class='text'><span>Some text</span><div>
</div>
<div class="box">
<div class='text'><span>Some text</span><div>
</div>
CSS
.box {
position: relative;
display:inline-block;
width:100px;
height:100px;
background-color:#0000FF;
float:left;
}
.box:before {
content:'';
position: absolute;
left: 1%;
top: 1%;
width: 98%;
height: 98%;
border: 1px solid white;
}
.text {
position: absolute;
bottom:9px;
left:5px;
width: 95%;
text-align:left;
}
.text span {
color: white;
font: bold 12px/16px Helvetica, Sans-Serif;
background: rgb(0, 0, 0);
/* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 1px;
padding-left:3px;
padding-right:1px;
}
EDIT:
Silly me, forgot to close the div tags. Apologies.
First of all you don't need float: left; if you are using display: inline-block; and vice versa..
If you are using float then don't forget to clear them and if you are sticking with display: inline-block; then I assume you will need vertial-align: top; as they are aligned to baseline by default. So use any one, as using both seems redundant
Also it's worth noting that using display: inline-block; will cause you white-space
And what's the issue? You are not closing your div tags, there are many ways to deal with that.
Demo
If you want to refactor your code, the below snippet
padding: 1px;
padding-left:3px;
padding-right:1px;
Can be written as padding: 1px 1px 1px 3px; which is nothing but shorthand syntax
Close the text divs and it works just fine.
<div class="box">
<div class='text'><span>Some text</span></div>
</div>
<div class="box">
<div class='text'><span>Some text</span></div>
</div>
See updated Fiddle
your closing <div> tags aren't closing - you need to change them to </div>. This is causing the boxes to nest inside of one another rather than being side by side.
Related
I have a header: FIXED position.
Here is css:
#header{
position:fixed;
height: 6em;
display:block;
width: 100%;
background: rgba(255, 255, 255, 1);
z-index:9;
text-align:center;
color: #000000;
}
And inside, I want to center text middle and vertical middle.
Here is what I have so far, but it's not working. All example online shows with an absolute position as the container, but it's not working with the fixed one.
HTML:
<div id="header">
<div id="bandname">Bewolf Photography</div>
<div id="insta"><img src="imgs/insta.png" width="40" alt="tablets" /></div>
<div id="bandname">Bewolf Photography</div>
</div>
CSS for text and image:
#bandname
{
display: inline-block;
font-size: 2.8em;
padding: 0px 0px 0 0;
vertical-align: middle;
background: rgba(0, 255, 0, 1);
}
#insta {
display: inline-block;
padding: 0px 0px 0px 50px;
vertical-align: middle;
}
I just can't figure that one out...
I tried using
line-height: 6em;
Help would be appreciated.. .thanks
but that doesn't work either.
Use the pseudo element vertical centre trick.
#header:before brings the inline elements down to the centre. The direct children of header are given display: inline-block and vertical-align: middle to keep a straight line.
Read more about pseudo elements here.
This technique basically adds a "div" before the rest of your content. (It can be replaced with a real <div> if you really need this to work in IE7 and below. [Don't bother!] ). It basically looks like this:
<div class="header">
<!-- added by css -->
<div>I am :before and you will all do as I say! To the middle, plebs!</div>
<!-- end css content -->
<div>Yes master!</div>
<div>Anything you say sir!</div>
</div>
Working Example
Note: I removed the div from around the image. It seems unnecessary, but can be placed back in if needs must. Also, I have targeted only the direct children of #header using the direct children selector: >. Here is a huge list of CSS selectors.
#header {
position: fixed;
height: 6em;
display: block;
width: 100%;
background: rgb(0, 255, 255);
/* Fall-back for browsers that don't support rgba */
background: rgba(0, 255, 255, 1);
z-index: 9;
text-align: center;
color: #000000;
top: 0px;
}
#header:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
#header > div,
#header > img {
display: inline-block;
font-size: 2.8em;
padding: 0px 0px 0 0;
vertical-align: middle;
}
<div id="header">
<div id="bandname">Test</div>
<img src="http://www.placehold.it/50" width="40" alt="tablets" />
<div id="bandname">test</div>
</div>
The easiest solution is to have the following css for it's content.
#header .wrapper
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
Since there are multiple children, it's better to wrap them around a wrapper div. Here's the working example:
http://jsfiddle.net/zf987w0b/1/
You can use the properties left, right, top and bottom, set em to 50% for example, and them use the transform property to translate the element -50% of itself to perfectly center it. Sounds confuse but i made a fiddle: http://jsfiddle.net/zzztfkwu/ Will this work?
EDIT: http://jsfiddle.net/kbh97n82/1 updated fiddle with .wrapper solution.
I have this:
<div style="line-height:50px;;white-space:nowrap;overflow:hidden;width:120px;height:50px;text-align:center;">
<span style="padding:20px;">aaaaaaaaaaaaaaa</span>
</div>
I removed some code to display it clean. The all code return this:
I want to horizontally text-align it to center. Keep in mind that I am also "clipping" the text, so it is not displaying all the text on purpose.
For the effect you want to achieve, you can use a combination of absolute positioning and CSS transform. The logic is to offset the inner span to the mid-point of its containing parent (therefore left: 50%), and the move it backwards by half of its own width, therefore effectively centering it within the parent (using transform: translateX(-50%)). You might want to use vendor prefixes for the CSS transform, and be aware that it is not supported in legacy browsers.
div {
background-color: #ccc;
line-height: 50px;
white-space: nowrap;
overflow: hidden;
width: 120px;
height: 50px;
position: relative;
}
span {
display: block;
padding: 0 20px;
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
}
See proof-of-concept fiddle here: http://jsfiddle.net/teddyrised/VCaEQ/
That space left of the aaaaaa's is just your padding:20px on the span.
Put that padding:20px; on the containing div, and..
Make your span another div, and then put the overflow:hidden on that inside div
Live example: http://jsfiddle.net/Hebj4/
HTML
<div id="div1">
<div id="div2">aaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>
CSS
#div1 {
width:120px;
height:50px;
padding:0px 20px 0px 20px;
line-height:50px;
text-align:center;
white-space:nowrap;
background-color: #777777;
}
#div2 {
overflow:hidden;
}
I'm trying to make a menu bar centered horizontally in the header of my page. For some reason, i can't get the centering to work. I made a little test page roughly displaying the problem: JSFiddle. The inner div has to be 5px away from the bottom, that's whatI use the position: absolute for.
I've tried searching on the web alot, but everything I find gives me the same result, or none at all. Most problems I found were when text-align: center wasn't in the container div, but even with it, it still doesn't work.
I removed two css attributes and it work.
position: absolute;
bottom: 5px;
Check this Fiddle
5px from bottom. Fiddle
This is not a perfect way, but it's still kind of useful. I first think of this idea from this Q&A.
You'll have to make some change to your HTML:
<div id="container">
<div id="wrapper-center"> <!-- added a new DIV layer -->
<div id="inner_container">
TEXT ELEMETNES IN THIS THING!!!!
</div>
</div>
</div>
And the CSS will change to:
#container {
background: black;
width: 100%;
height: 160px;
position: relative;
}
#inner_container {
display: inline-block;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
position: relative;
left:-50%;
}
#wrapper-center {
position:absolute;
left:50%;
bottom:5px;
width:auto;
}
Demo fiddle
The trick is to place the wrapper at the given top-bottom position, and 50% from left (related to parent), and then make the true content 50% to left (related to the wrapper), thus making it center.
But the pitfall is, the wrapper will only be half the parent container's width, and thus the content: in case of narrow screen or long content, it will wrap before it "stretch width enough".
If you want to centre something, you typically provide a width and then make the margins either side half of the total space remaining. So if your inner div is 70% of your outer div you set left and right margins to 15% each. Note that margin:auto will do this for you automatically. Your text will still appear to one side though as it is left-aligned. Fix this with text-align: centre.
PS: you really don't need to use position absolute to centre something like this, in fact it just makes things more difficult and less flexible.
* {
margin: 0;
padding: 0;
}
#container {
background: black;
width: 100%;
height: 160px;
}
#inner_container {
color:red;
height:50px;
width: 70%;
margin:auto;
text-align:center;
}
If you don't want a fixed width on the inner div, you could do something like this
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
That makes the inner div to an inline element, that can be centered with text-align.
working Ex
this CSS changes will work :
#container {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner_container {
display: inline;
margin: 0 auto;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
Try this:
html
<div id="outer"><div id="inner">inner</div></div>
css
#outer {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner{
display: inline;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
example jsfiddle
You may set the inline style for the inner div.
HTML:
<div id="container">
<div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
<div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
</div>
</div>
Here is working DEMO
I put down an example below that I have trouble with:
<div class="text1">Text 1</div>
<div class="text2">Text 2</div>
Link: http://jsfiddle.net/qhoc/SQpdu/5/
Text 1 has pseudo-element but the height being adjusted with the pseudo-element height.
Requirements:
a. Text 1 height same as Text 2 height
b. The red rectangle in the middle of the button.
c. The text must have space around them
d. Everything has to be position:relative, at least not absolute or fixed because this is just a button that could be placed anywhere.
I could just (a) remove padding: 6px 12px; and add height: 30px; but then my text won't be in the middle with space around it OR (b) add another inner div within Text 1 and make that the red rectangle but I rather not add div.
Is there a way to work around this?
UPDATE: I changed the correct link and clarify the requirements.
I don't know what exactly you want but try this maybe helpful
.text1, .text2 {
width: 200px;
padding: 8px 12px;
display:block;
background-color: gray;
margin: 5px;
height:20px;
}
.text1{
height:28px;
padding:0px 12px 8px 12px;
}
.text1:before {
content:"";
background: red;
display: block;
position: relative;
width: 20px;
height: 10px;
left: 110px;
top: 15px;
}
DEMO
You use this style code
.text1, .text2{
width:120px;
margin:0 auto;
height:30px;
}
I am trying to center align an image that is wrapped in a <span>, but I am having trouble doing so. I have uploaded my CSS and HTML to jsfiddle: http://jsfiddle.net/7nHhu/1/
I am trying to get the image to center align itself with the content in a "block" style (ie. all text above and below it, not wrapped to the left or right)
Any help would be greatly appreciated.
.imgframe {
border: 1px solid #EAEAEA;
display: inline-block;
margin: 8px;
}
.imgframe img {
border: 1px solid #FFFFFF;
margin: 0;
background: #F6F6F6;
padding: 8px;
-moz-box-shadow: 2px 2px 5px #CCCCCC;
-webkit-box-shadow: 2px 2px 5px #CCCCCC;
}
<span class="imgframe centerimg"><img src="http://i48.tinypic.com/31368e9.jpg" /></span>
I think it's more appropriate to use text-align for centering text rather than images. You could center an image by setting left and right margin auto.
img {
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
padding-top: 10px; //margin-top doesn't work
}
Demo
Just make image wrapper block level element and text-align:center; it.
FIDDLE
or wrap it in another element if needed;
FIDDLE
In .imgframe, add width: 100%;
Given your requirements, to keep the .imgframe element in-line, to avoid it taking up the full width of the enclosing element, and working without adding wrapping elements to your mark-up, the following works:
body {
text-align: center;
}
body p {
text-align: left;
}
JS Fiddle demo.
This would, probably, be less intrusive if you had the elements from your Fiddle wrapped in a specific, target-able, element; rather than the body, as the method, above, requires you to reset the text-align for all elements contained within the body. So, personally, I'd use:
<div id="contentWrapper">
<p>...</p>
<span class="imgframe">
<img src="..." />
</span>
<p>...</p>
</div>
And:
#contentWrapper {
text-align: center;
}
#contentWrapper p {
text-align: left;
}
Just in order to minimise the amount of work required to tidy up afterwards.
span {position: absolute; top:0; left: 0; width: 100%; text-align: center;}
img {width:yourimagewidth; heigth: width:yourimageheigth}