I created a DIV without fixed with - just let it take 100% of its parent. Now I want to use a dash as a centered element. The Dash should always appear exactly in the middle of the div. There should be not fix-sized elements around that dash who kind of float around it.
Is there any way to do it ?
HTML
<div>
<span>Element #1</span>
<span class="centered">-</span>
<span>Element #2</span>
</div>
I tried to set the centered Element to Absolute which will always keep it in the middle of the DIV (with text-align center), BUT then I cant let the items around it. Element #1 could contain 20 signs why Element #2 could only be 3 characters big.
Any ideas are appriciated, besides trying to fix it with a classic table or using JS.
Pardon if I misunderstood your question, but what about CSS tables? Using text-align in the sample below isn't mandatory, it just centers the example texts.
.t {
background: thistle;
display: table;
width: 100%;
text-align: center;
}
.t > .centered {
width: 1px; /*Will resize*/
}
.t > span {
display: table-cell;
width: 50%;
}
<div class="t">
<span>Element with longer content #1</span>
<span class="centered">-</span>
<span>Element #2</span>
</div>
Related
I have a bit of clarification regarding line-height in css .I tried the following code:
.red {
line-height: 4.1;
border: solid red;
}
.box {
width: 18em;
display: block;
vertical-align: top;
font-size: 15px;
}
<div class="box red">
<div>Avoid unexpected results by using unit-less line-height</div>
length and percentage line-heights have poor inheritance behaviour ...
</div>
In the example above , I havent used display:inline or display:inline-block ,but still I am able to see the spacing between the text .Why is it?
Also , I have one more clarification : when I apply line-height : 25em; on an inline-block element say <div style="display:inline-block;line-height : 25em;"></div> ,
will the space occupy on top and bottom of this element with respect to its parent or the spacing will occur for the inline elements of its children?
In the example above , I havent used display:inline or
display:inline-block ,but still I am able to see the spacing between
the text .Why is it?
An element inherit line-height from its parent, no matter it is an inline/inline-block/block, but as you can see below, a block element behaves different than an inline, where the block element itself is not affected (no space between the div elements) but its content is.
body {
line-height: 4;
}
div, span {
background: lightblue;
}
div + div, span + span {
background: lightgreen;
line-height: 3;
}
div + div + div {
background: lightgray;
line-height: 2.5;
}
<span>
This is a sample text inside a span element<br>
that has a line break making this come in 2 lines
</span>
<span>
This is a sample text inside a span element
</span>
<div>
This is a sample text inside a div element<br>
that has a line break making this come in 2 lines
</div>
<div>
This is a sample text inside a div element
</div>
<div>
<span>
This is a sample text inside a span element<br>
that has a line break making this come in 2 lines
</span>
<span>
This is a sample text inside a span element
</span>
<div>
When I apply line-height : 25em; on an inline-block element say <div
style="display:inline-block;line-height : 25em;"></div> , will the
space occupy on top and bottom of this element with respect to its
parent or the spacing will occur for the inline elements of its
children?
For its children
div:nth-child(2) {
display: inline-block;
line-height: 4;
background: lightgreen;
}
div:nth-child(1),
div:nth-child(3) {
background: lightblue;
}
<div>
This is a sample text displayed as block
</div>
<div>
This is a sample text displayed as inline-block
</div>
<div>
This is a sample text displayed as block
</div>
Line height gives the line the text is sitting on a height value. Think of it as when writing in a notepad. When changing the line heights, you are changing the distance between the lines regardless of whether the sentence overflows onto the next line.
If you are trying to achieve a gap between sentences, separate them with "p" tags and then add padding and or margin to your tags.
.p { margin: 10px 0; }
.p { padding: 10px 0px; }
Hello i think the problem in not for line height. I think the main problem is -
width:18em;
Be clear about em. Basically em depends on its parents value. Read this carefully. I think your problem will be solved. If you still face problem then use -
width:100%;
I tried the below code wherein I wanted to center a link , I dont know why these 2 below piece of code didnt work
Code1:
<span class="my-class">
example
</span>
Code2:
example
The piece of code which worked was:
<div class="my-class">
example
</div>
Could you please tell me why the above 2 codes didnt work?
The first doesn't because the anchor a is inside an inline element, which just grow to its content's size, and their parent, the body, does not have the property text-align: center set.
The second doesn't because its parent, in this case the body, need to have the rule text-align: center
The third does because the my-class most likely has the text-align property set to center, and as a div is a block element it spawn the full width of its parent, in this case the body, hence the anchor will center inside it.
So, to center an inline (and inline-block) element, its parent need the propertytext-align: center set, and to center a block element, like a div, it has to have a width, less wide than its parent, and its margin's left/right set to auto.
Sample
.centered-span {
text-align: center;
}
.centered-div {
width: 50%;
margin: 0 auto;
}
<span class="centered-span">Hey there (not centered)</span>
<div class="centered-span">
<span>Hey there - span</span>
<div>
<div class="centered-div">Hey there - div</div>
span and a elements do not behavior as blocking element because they are supposed to be used inline. You either will need to set it by setting up a display and width attribute or wrapping it around a parent. Instead, you could use a ul>li>a hierarchy and set their attributes properly.
.aBox {
display: block;
width: 200px;
text-align: center;
background-color: lightyellow;
}
.notBox {
background-color: lightblue;
text-align: center;
}
<span class="aBox">
Hey, it's a link
</span>
<span class="notBox">
Hey, it's a link
</span>
A span element is an in-line element which is only as wide as its content. Whereas a div element is a block level element and will be as wide as the page or its containing div.
When using the `text-align: center;' property, you must place it on the element containing the element that you want to center.
Complete noob here with HTML/CSS.
I'm trying to get something like this : http://imgur.com/Bc72V4M
Here is my code:
<div id="topbar">
<div class="image">
<img src="images/ghwlogo.png">
</div>
<div class="text">
<h1>TEXT TEXT TEXT TEXT TEXT</h1>
</div>
</div>
I've tried floating the div topbar, then display-inline but it never displays horizontally.
I'm so confused. Following tutorials is easy-peasy, but when you need to figure out how to do this yourself, it's completely different.
I think I'm missing a step somewhere. I feel like this should be really easy but it's not.
img {
display: inline;
vertical-align: middle;
}
.subhead {
display: inline;
vertical-align: middle;
}
<div>
<img src="http://dummyimage.com/100x100/000/fff"/>
<h1 class='subhead'>
TEXT
</h1>
</div>
I removed some HTML; I only add more when I can't think of how to get the effect with just CSS. You can add some back, but you may have to set display: inline on some inner elements then.
Generally, a few different ways of putting elements horizontally:
Floating: Removes it from standard flow layout, and may interfere with the root element's total height. Was previously the preferred method of placement but I feel like there are better alternatives.
Display Inline: Treats an element a bit like text. Cannot have a custom height or various other attributes.
Display Inline-Block: Often a "fix-all" for me when I want something laid out horizontally, but to have other styling aspects like height, border, etc.
Position Absolute: You can make a higher element a "relative element" for absolute positioning by setting position: relative on it. Like floating this takes it out of layout, but it can even overlap elements; useful for certain things. Don't rely on absolute pixel amounts too much.
In my case, once things are laid out horizontally, vertical alignment is the next issue. Remember that adding content could make this block very very tall, so you can't just say "vertical-align to the bottom of the thing". Think of all elements in the div as simply letters in a paragraph; for the smaller ones, you're telling it how to align that one letter. For the biggest ones, you're telling it where that "letter" is aligned compared to the others. So, it's important to set vertical alignment how you want it on the image as well.
EDIT: updated answer per #Katana314 answer. I've maintained the OP's markup.
#topbar {
width: 100%;
overflow: hidden;
}
.image {
display: inline-block;
vertical-align: middle;
border: 5px solid black;
height: 100px;
width: 100px;
}
.text {
display: inline-block;
vertical-align: middle;
}
Fiddle: https://jsfiddle.net/dgautsch/che0dtfk/
You could make the image and the text a separate div and then have both of them under the inline-block attribute. The text div would need to have a position: absolute attribute, though, for formatting purposes.
After viewing the Fiddle, you can adjust the left position attribute accordingly to generate space. Here is the link: https://jsfiddle.net/kuLLd866/.
HTML:
<body>
<div class="image">
<img src="http://gfx2.poged.com/poged/game_logo_default_fix.png?2492">
</div>
<div class="imagetext">
<h1>Text text text</h1>
</div>
</body>
CSS:
.image {
display: inline-block;
}
.imagetext {
position: absolute;
top: 50px;
display: inline-block;
}
I am a relative novice in the world of CSS so please excuse my ignorance! I am attempting to use the following CSS to align two divs horizontally:
.portrait {
position: relative;
display:inline-block;
width: 150px;
height: 200px;
padding: 20px 5px 20px 5px;
}
.portraitDetails {
position: relative;
display:inline-block;
width: 830px;
height: 200px;
padding: 20px 5px 20px 5px;
}
Unfortunately, unless I remove the display: inline-block from the .portrait class and replace it with float:left the .portraitDetails div block appears underneath the first div block. What on earth is going on?
Since you provided a working example, the problem seems to be more clear now.
What you have to do is simply remove display: inline-block and width: 830px properties from the right div. Of course remember to NOT add the float property to it.
People sometimes forget what is the purpose of the float property. In your case it is the image which should have float property and the image only. The right div will remain 100% wide by default while the image will float it from the left.
HINT: If the text from the div is long enough to float underneath the image and you want to keep it "indented" at the same point then add the margin to the div with a value equal to the image's width.
The problem with display: inline-block; is that the siblings having this property are always separated by a single white-space but only if there are any white-spaces between their opening and closing tags.
If the parent container has fixed width equal to the sum of the widths of these two divs, then they won't fit because this tiny white-space pushes the second div to the next line. You have to remove the white-space between the tags.
So, instead of that:
<div class="portrait">
...
</div>
<div class="portraitDetails">
...
</div>
you have to do that:
<div class="portrait">
...
</div><div class="portraitDetails"> <!-- NO SPACE between those two -->
...
</div>
I have some buttons that have varying numbers of lines of text, all with a fixed width and height. It seems that anything I put between the <button> </button> tags are vertically aligned to the middle by default. I want to vertically align the text within the button to the top, so that the first line of each button starts at the same line.
One workaround I found was this, but as you can see in this example (http://jsfiddle.net/d27NA/1/), with this approach, I have to manually designate the top property for buttons that contain texts of different lengths, else buttons that contain longer text will overflow the top.
I'm wondering if there is an alternate approach that will solve this problem in a more elegant way. Thanks.
html:
<div>
<button class="test">
This text is vertically center-aligned. I want this to be top-aligned.
</button>
</div>
css:
.test{
font-size:12px;
line-height:14px;
text-align:center;
height:100px;
width:100px;
}
Yup, just define the button as position:relative; and the span as position:absolute;top:0;left:0; and you're in business.
jsFiddle updated
UPDATE
So in the three years since this answer, flexbox has become more prominent. As such, you can do this now:
.test {
display: inline-flex; /* keep the inline nature of buttons */
align-items: flex-start; /* this is default */
}
This should give you what you're looking for. You may need to apply appearance: none; (with appropriate browser prefixes), but that should do it.
You just need to change the CSS of Button and Span. Separate both the CSS and make following changes:
button {
display: block;
position: relative;
}
span {
display: block;
position: absolute; //<-- Make it absolute
top: 0px; //<-- Set the top property accordingly. In this case 0px;
}
Set the position of span as absolute and set top property accordingly
Like PlantTheIdea's answer, this one adds a <span>, but is simpler and works across browsers.
<div>
<button class="test">
<span>
This text is vertically center-aligned. I want this to be top-aligned.
</span>
</button>
</div>
.test > span {
display: block;
height: 100%;
}
I would replace the BUTTON tag with A or DIV, and then style it to look like a button.