I have a div like this, where I want the text and image to be horizontally aligned, where the space from the left of the div and right of the div are equal. Here's the current code I have, though it is definitely not optimal:
.window{
position:absolute;
width: 400px;
height: 300px;
background-color:#424242;
}
.content{
padding-top:50px;
width: 50%;
position:relative;
vertical-align: top;
margin: 0 auto;
display:flex;
}
img {
height: 32px;
width: 32px;
min-width: 32px;
min-height: 32px;
position: relative;
float: left;
}
.textcontent{
margin-top: auto;
margin-bottom: auto;
margin-left: 16px;
display: block;
line-height: 182%;
}
.text{
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="window">
<div class="content">
<img src="https://cdn4.iconfinder.com/data/icons/family-and-home-collection/110/Icon__grandfather-32.png" />
<div class="textcontent">
<div class="text"> Some Centered Text. </div>
<div class="text"> Some Other Text. </div>
</div>
</div>
</div>
</body>
</html>
The issue is that the "window" could be any size, the image could be a fair amount of sizes, and the items in text content could be longer and larger font-size. Additionally, the second line of text is not always visible.
This is a problem, since if the text is very long, the 50% width is very small, and the text wraps several times when there is plenty of room.
.window{
position:absolute;
width: 500px;
height: 300px;
background-color:#424242;
}
.content{
padding-top:50px;
width: 50%;
position:relative;
vertical-align: top;
margin: 0 auto;
display:flex;
}
img {
height: 32px;
width: 32px;
min-width: 32px;
min-height: 32px;
position: relative;
float: left;
}
.texcontentt{
margin-top: auto;
margin-bottom: auto;
margin-left: 16px;
display: block;
line-height: 182%;
}
.text{
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="window">
<div class="content">
<img src="https://cdn4.iconfinder.com/data/icons/family-and-home-collection/110/Icon__grandfather-32.png" />
<div class="textcontent">
<div class="text"> Some text that is very very long and wraps. </div>
<div class="text"> This text is also very long and also wraps. </div>
</div>
</div>
</div>
</body>
</html>
I could counter this by making the width % in the .content rule larger, but then for small content in a large window, it will not be centered anymore.
Long story short, is there a better way to get the text centering I want for different sizes, without having to have it be very narrow?
Thank you!
To align your text and image horizontally inside div, you could use display:flex and justify-content: center. Justify-content:center will align the children at the center of the container.
.content {
width: 400px;
display: flex;
justify-content: center;
align-items: center; /* Only if you want it vertically center-aligned as well */
background: #ccc;
padding: 40px;
}
<div class="window">
<div class="content">
<img src="https://cdn4.iconfinder.com/data/icons/family-and-home-collection/110/Icon__grandfather-32.png" />
<div class="textcontent">
<div class="text"> Some text that is very very long and wraps. </div>
<div class="text"> This text is also very long and also wraps. </div>
</div>
</div>
</div>
View in CodePen
Hope this helps!
Related
I have some text that can overflow the parent container:
body {
margin: 200px;
}
.container {
width: 100px;
height: 50px;
background-color: #bbb;
text-align: center;
}
.header {
white-space: nowrap;
}
<div class="container">
<div class="header">
Short Text
</div>
<div class="header">
Very long text that should not wrap and be center aligned
</div>
</div>
When text is short, it is center aligned, as expected.
However, when the text overflows the container, it's not center aligned anymore.
How could I align the text horizontally regardless of the length of the text?
Desired outcome:
html:
<div class="container">
<div class="header">
<div>Short Text</div>
</div>
<div class="header">
<div>Very long text that should not wrap and be center aligned</div>
</div>
</div>
</body>
</html>
css:
body {
margin: 200px;
}
.container {
width: 100px;
height: 50px;
background-color: #bbb;
display: flex;
flex-wrap: wrap;
}
.header {
white-space: nowrap;
position: relative;
left: 50%;
transform: translateX(-50%);
}
for demo here, https://jsfiddle.net/jinny/qs7wL4nv/33/
Use text-indent:
body {
margin: 200px;
}
.container {
width: 100px;
height: 50px;
background-color: #bbb;
text-align: center;
}
.header {
white-space: nowrap;
text-indent: -8em;
}
<div class="container">
<div>
Short Text
</div>
<div class="header">
Very long text that should not wrap and be center aligned
</div>
</div>
flexbox can do this easily
body {
margin:0 200px;
}
.container {
width: 100px;
height: 50px;
background-color: #bbb;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.header {
white-space: nowrap;
}
<div class="container">
<div class="header">
Short Text
</div>
<div class="header">
Very long text that should not wrap and be center aligned
</div>
</div>
I'm relatively new to some concepts in HTML and CSS and this one I can't seem to wrap my head around. I'm trying to align two floating <p> elements to both sides of a centered <img>. Here's what I'm basically trying to achieve.
I want the two texts to stick to the sides of the centered image even when the window is at full width. I have it working only when I resize the window to the point where they're squished to the sides of the image.
.header {
margin-top: 85px;
text-align: center;
}
<div class="header">
<p style="float: left; margin-top: 115px;">listen</p>
<img id="main_cover" src="img/into-me.png" width="250" height="250" draggable="false">
<p style="float: right; margin-top: 115px;">download</p>
</div>
Any help is appreciated, especially since this may be a dumb question. Thanks in advance.
You can use Flexbox or CSS tables Fiddle
.content {
display: flex;
align-items: center;
justify-content: center;
}
<div class="content">
Listen
<img src="http://placehold.it/250x250">
Download
</div>
Do this...
<div class="header">
<p>listen</p>
<img id="main_cover" src="img/into-me.png" width="250" height="250" draggable="false">
<p>download</p>
</div>
And your CSS...
.header { width: 400px; margin: 0 auto}
.header img { margin: 0 20px; float: left; }
.header p { margin: 115px 0 0; float: left;}
You could have just given the container a defined width so the floated elements wouldn't float further away as the window size changes:
.header {
margin-top: 85px;
text-align: center;
width: 370px;
margin: 0 auto;
}
https://jsfiddle.net/8sfvgvgr/
How about flexboxes to obtain this?
header{
display: flex;
justify-content: space-around;
align-items:center;
}
span{
text-align:center
}
img{
margin-left: 10px;
margin-right: 10px;
width: 250px;
}
<header>
<span>Text</span>
<img src="https://pixabay.com/static/uploads/photo/2014/07/27/20/29/landscape-403165_960_720.jpg" alt="Landascape">
<span>Text</span>
</header>
You can do this with Flex.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
}
.flex-item {
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">listen</div>
<div class="flex-item">Image </div>
<div class="flex-item">Download</div>
</div>
</body>
</html>
I want to place a short texte at the beginning of a centered headline.
My current solution is to have a container with display inline arround the headline
and placing the text with text right and display block.
This works pretty good until the I have a long headline.
The HTML:
<div class="article">
<div class="headline-container">
<span class="headline-companion">FooBar</span>
<h3>Sample Headline</h3>
</div>
</div>
THE SCSS:
.article{
display:block;
width: 700px;
margin: 50px auto;
padding: 20px;
text-align: center;
}
.headline-container{
display: inline-block;
margin: 0 auto;
text-align: center;
position: relative;
h3{
font-size: 40px;
margin: 0;
padding: 0;
display: inline;
}
.headline-companion{
margin: 0;
padding: 0;
display: block;
text-align: left;
}
}
http://codepen.io/anon/pen/PwNJGy
Are there any solutions where I don't have to position the text with absolute?
Clarification:
I want that the Short text beggins always at the first letter of the headline no matter how long the centered headline is.
Something like what (I think) you want to do can be accomplished if you wrap your <h3> tag in another element and set a max-width value, and by specifying word-wrap.
This allows you to change the width of the parent divs, or length of the header text without having very negative effects on the overall formatting:
[Edit]: In addition, another element needs to be added if you want to have the headline-companion and headline centered with respect to article but with left justified text... in this case sub-headline-container.
.article {
display: block;
width: 800px;
margin: 50px auto;
padding: 20px;
text-align: center;
}
.headline-container {
display: inline-block;
margin: 0 auto;
text-align: center;
position: relative;
}
.headline-wrap {
word-wrap: break-word;
max-width: 800px;
text-align: left;
}
.headline-companion {
margin: 0;
padding: 0;
display: block;
text-align: left;
}
<div class="article">
<div class="headline-container">
<div class="sub-headline-container">
<span class="headline-companion">FooBar</span>
<div class="headline-wrap">
<h3>
Sample Headline
</h3>
</div>
</div>
</div>
</div>
<div class="article">
<div class="headline-container">
<div class="sub-headline-container">
<span class="headline-companion">FooBar</span>
<div class="headline-wrap">
<h3>
SUUUUUUPPPPERRRRRRRR BIG HEADLINE!!! ------------------------------- --------------
</h3>
</div>
</div>
</div>
</div>
I've searched it at online and found some solution. But, nothing works at my project. At most of the solution, I've found:
<div class="a">
<div class="b">
Unknown stuff to be centered.
</div>
</div>
.a {
display: table;
width: 100%;
}
.b {
display: table-cell;
text-align: center;
vertical-align: middle;
}
By applying this technique, I've tried to build something like this: http://jsfiddle.net/L2GZx/1/
The text of left column only needed to be aligned middle vertically. But, it's not working with that technique:
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
<div class="row">
<div class="left">
<p>Sample Text Sample Text Sample Text Sample Text Sample Text </p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
CSS:
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
display: table;
}
.left {
float: left;
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
.right {
float: right;
background: #fff;
width: 40%;
padding: 20px;
}
How can I make the text of left-column aligned middle vertically? Note: I can't use any fixed height as content of each row will be different
Remove the floats. Floated elements can not also be displayed as table-cells. See updated Fiddle.
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
display: table;
}
.left {
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
.right {
display: table-cell;
background: #fff;
width: 40%;
padding: 20px;
}
.left {
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
removing" float:left " from .left style solves that issue, but using table and div together is not that good.Working Example
An alternative that I prefer in a situation like this is:
To not use display: table-cell, but rather use display:
inline-block.
To then use vertical-align: middle on the element.
Sample (revised) markup / css:
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
CSS:
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
}
.row > div {
display: inline-block;
/* below 2 lines are IE7 hack to make inline-block work */
zoom: 1;
*display: inline;
/* below is consolidated css for both left / right divs */
width: 40%;
padding: 20px;
}
.left {
vertical-align: middle; /* or top or bottom */
}
.right {
background: #fff;
vertical-align: top; /* or middle or bottom */
}
All you have to do is to add a line-height to the left column and it will be automatically aligned (without vertical-align so you can remove it).
Here it is:
.left {
float: left;
width: 40%;
padding: 20px;
display: table-cell;
line-height:150px;
}
And here is your updated FIDDLE
Using your first example, try something like this. I'll explain how it works in the CSS.
<div class="a">
<div class="b">
Unknown stuff to be centered.
</div>
</div>
.a {
width: 100%;
position: relative; /* We want our parent div to be the basis of our absolute positioned child div */
/* You can set your height here to whatever you want */
}
.b {
position: absolute;
width: 100%; /* Set to be the full width, so that our text is aligned centered */
text-align: center;
top: 50%; /* Positions the top of the div at 50% of the parent height */
left: 0; /* Assures that the child div will be left-most aligned */
margin-top: -.5em; /* Moves the top of our div up by half of the set font size */
height: 1em; /* Sets our height to the height of the desired font */
}
Here is the JSFiddle link to see a live example: http://jsfiddle.net/L2GZx/20/
This is one of the best solutions to absolutely center text inside of a webpage. It does have it's limitations however seeing how it won't react to other elements inside the same parent and it also has to have a set height. So multiline text will have it's shortcomings with this method.
I hope this helps!
For some reason, iE8 and IE7 are not behaving like other browsers, and the relative position element background image, doesn't appear.
Any suggestions please?
The HTML
<div id="container1">
<div class="main-column">
<h2>Hello tittle 1</h2>
<div class="text-column">
<p>I'm on column 1 and I like it</p>
<p>I'm on column 1 as well</p>
</div>
</div>
<div class="main-column">
<h2>Hello tittle 2</h2>
<div class="text-column">
<p>I'm on column 2 and I like it</p>
<p>I'm on column 2 as well</p>
</div>
</div>
<div class="main-column">
<h2>Hello tittle 3</h2>
<div class="text-column">
<p>I'm on column 3 and I like it</p>
<p>I'm on column 3 as well</p>
</div>
</div>
</div>
Notes:
a) Absolute position instead of relative will ruin the all layout.
b) I have a space on my background declaration so it's not a space issue.
Try I:
The same markup, but now with absolute position:
#container1 {
background-color: red;
text-align: center;
}
.main-column {
display: inline-block;
}
.main-column h2 {
width: 220px;
height: 235px;
padding-top: 110px;
position: absolute; /* <<-- Changed */
background: url('http://s24.postimg.org/ossqwb7hh/carica_Kairos.png') no-repeat center top;
margin: 0 auto;
}
.text-column {
width: 220px; /* <<-- Make it equal to the h2 */
height: 300px;
background-color: yellow;
margin: 120px auto 0 auto;
padding-top: 270px; /* <<-- Adjust */
}
.text-column p {
padding: 0 50px;
}
same issue. IE8 and IE7 not displaying images. :(
I'm not quite sure what you're looking to do, but since the h2 is a block item, it might not obey your height/width CSS. I would float or absolute position it.
EDIT: Here is a working workaround, please test it on youtr machine since I'm using IE8 emulator. JSFiddle
HTML
<div id="container1">
<div class="main-column">
<div class="h2"><span>Title 1</span><img src="http://s24.postimg.org/ossqwb7hh/carica_Kairos.png" width="230" height="243" /></div>
<div class="text-column">
<p>I'm on column 1 and I like it</p>
<p>I'm on column 1 as well</p>
</div>
</div><br>
<div class="main-column">
<div class="h2"><span>Title 1</span><img src="http://s24.postimg.org/ossqwb7hh/carica_Kairos.png" width="230" height="243" /></div>
<div class="text-column">
<p>I'm on column 1 and I like it</p>
<p>I'm on column 1 as well</p>
</div>
</div><br>
<div class="main-column">
<div class="h2"><span>Title 1</span><img src="http://s24.postimg.org/ossqwb7hh/carica_Kairos.png" width="230" height="243" /></div>
<div class="text-column">
<p>I'm on column 1 and I like it</p>
<p>I'm on column 1 as well</p>
</div> </div>
</div>
CSS
#container1 {
background-color: red;
text-align: center;
}
.main-column {
display: inline-block;
}
.main-column .h2 {
width: 220px;
height: 244px;
padding-top: 110px;
position: relative;
/*background: url('http://s24.postimg.org/ossqwb7hh/carica_Kairos.png') no-repeat center top;*/
}
.main-column .h2 span{
z-index: 2;
position: absolute;
text-align: center;
line-height: 243px;
margin-top: -110px;
left: 0;
width:100%;
font-weight: bold;
font-size: large;
}
.main-column .h2 img {
position: absolute;
top: 0;
left: -4px;
z-index: 0;
}
.text-column {
width: 220px;
height: 300px;
background-color: yellow;
margin: -223px auto 0 auto;
padding-top: 220px;
}
.text-column p {
padding: 0 50px;
}
OLD answer below
It seems you are using <h2> like a block when its a header element. You should try these tips for now:
Explicitly declare display: block; on that element.
Explicitly declare them all as position: relative;
Change the <h2> tag to a <div>