I am trying to wrap an image with some adjacent text, and i can align it to top-left and top-right using align="" attribute or float. But how can i align image to the vertical and horizontal center of whole text after wrapping.
Like this:
I have tried below code,
<p>
<img align="middle" src="http://placehold.it/140x100" /> Some More text Here....
</p>
You won't be able to do it with a single block of text (I can't think of a single instance where it's aesthetically pleasing and functionally desirable, but I'd love to be proved wrong), but you can with two columns. There's a great article on it here:
http://alistapart.com/article/crosscolumn
Essentially, you use pseudo-elements to create an empty space that is the same size as the image, then position the image onto that space.
Solution 1
Fiddle 1 for the image shown in the question:
CSS:
html, body
{
height: 100%;
width:100%;
margin:0;
padding:0;
}
#main{
width:100%;
text-align:justify;
margin:0;
padding:0;
}
.class1{
position:absolute;
}
#child1{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
text-align:justify;
margin:0;
padding:0;
background:url(http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
Solution 2
If you want to wrap the text around the only way to do it is using float.See this Fiddle 2
CSS:
.class1 img{
float:left;
}
Solution 3
But the above solution will not allow you to center the image.For centering image you will have to do
some trick like this Fiddle 3 . But this will require large amount of effort to adjust writing between the two columns/divs.
Related
I divided my page in sections, one of the sections contains a h2-Tag (the title of the section) and a div (that contains a p-Tag).
I want the text to be perfectly centered inside the section, because of that, I've used flex to center the element.
Now I need the title to be aligned on the left side (see image for better explanation).
https://ibb.co/b5DSpT
If I add it to the div affected by the flex-property the styling is completely wrong. If I remove it from the div, the text isn't perfectly centered anymore, because the h2-tag occupies a small amount of the section.
Any ideas how to solve this problem?
Thanks,
Mike
You don't need to use flex. Check the code below.
.wrapper{
padding:25px;
background:#d0e1d9;
}
.title{
color:#000;
font-size:20px;
margin:0 0 25px 0;
}
.section{
padding:50px 25px;
text-align:center;
font-weight:bold;
font-size:20px;
background:#e5e5e5;
}
<div class="wrapper">
<div class="title">Uber uns</div>
<div class="section">This is the Div with the Text</div>
</div>
I want to align several div's into one line and also center the content vertically and horizontally.
The text to align vertically could be a single line, or a <p> paragraph.
To show n-number of divs in one line, there are 3 approaches
use display:table;
This method is supported IE8 and above and comes in pretty handy if you have large amount of css and text and divs to align
use float:left;
All time favorite, the old school approach, this method is most recommended when old browser support has to be considered, requires clearing of the float at the end
use display:inline-block;
never used this method personally float method was considered instead of using this by me
Base CSS
/************Supported by IE8 and above *******************/
div.table {
width:100%; /* important */
display:table;
text-align:center;
}
.table-cell {
display:table-cell;
vertical-align:middle;
}
/************ Method 2 *******************/
div.inline {
width:100%;
display:inline-block;
text-align:center;
}
div.inline-div {
width:32%;
display:inline-block;
}
/************ Method 3 *******************/
.float-class {
width:100%;
text-align:center;
}
div.floatdiv {
float:left;
width:32%;
border:1px solid black;
}
.clearfloat {
clear:both;
}
fiddle showing all three methods in 1 place
To vertically center one line in a div
again 3 approaches :
keep in mind, solution has to be responive, so margin-top:25% or 50% is not gonna work!!!
line-height
this approach is usefull when the dimesnion of the parent div is known, then you can simply use the trick line-height:equal to height of parent div
position
idea is to make the parent positioned relative and the text span class an absolute, then center the absolute text using positioning like top/bottom
display:table-cell
highly recommended if IE7 and older support is not required, simply use vertical-align:middle;
Base css
div.fixed-div-height {
height:200px;
width:200px;
text-align:center;
}
div.fixed-div-height span {
line-height:200px; /* equal to height of the fixed div*/
}
div.unknown-div-height {
height:100%;
text-align:center;
position: relative;
}
div.unknown-div-height > span.unknown-div-margin {
display:inline-block;
height:20px;
position: absolute;
top: 50%;
left:0;
right:0;
}
div.for-ie8-and-above{
width:100%;
display:table;
height:400px;
text-align:center;
}
div.for-ie8-and-above > div{
height:400px;
width:100%;
display:table-cell;
vertical-align:middle; /* key here */
}
fiddle showing all three methods
To center a paragraph vertically in center
this is the tricky part
Practically there is no possible way to center a parapgraph whose height and the containers height is unknown unless you gor for some hacks....one such hack has been quoted at the end of this answer from css tricks!!
Simplest, use :
div.table-cell {
height:400px; /* can be anything, even in percentage*/
width:100%;
display:table-cell;
vertical-align:middle; /* key here */
}
fiddle showing remaining 2 possible cases
Another solution posted here :
How do I vertically center text with CSS?
IE hack for display:tables : CSS Tricks
I aligned multiple divs within a table cell (td) by creating a container DIV, as follows:
<td>
<div class="containingDIV"> // container DIV with CSS as below
<div></div>
<div></div>
<div></div>
</div>
</td>
where css for containingDIV is:
.containingDIV {
display: flex;
}
http://jsfiddle.net/V2mGG/
<div class="header-wrap">
<h2> title </h2>
<p class="company-desc">description float right</p>
</div>
I want something like this
Bachelor Degree in Product Design
at Harvard
but the title can be long and short, it's dynamic, how to design the layout so that it won't break?
Change the float:right; to text-align:right; right.
Because with float, your <p> content won't stay inside of the head-wrap anymore. I just added in this demo a border to the header-wrap to show you which content will stay inside of the tag with your code.
And here is the demo which I use the text-align:right value and also added a border to the wrapper to show you, the p-tag will stay inside of the wrapper:
Codepen Demo
With this solution, your title will have the left-alignment, and the description will stay on the right. If you want both with the alignment right, just copy the text-align:right to the CSS-statement of the wrapper.
Please also read this awesome article all about CSS-float by CSS-Tricks to understand how it really works.
Like this
demo
css
.header-wrap{
margin:0 auto;
width:200px;
text-align:right;
}
h2.header-wrap{
margin:0;
padding:0;
}
.header-wrap p{
text-align:right;
float:right;
margin:0;
padding:0;
}
Just with this
.header-wrap{
margin:0 auto;
width:200px;
text-align:right;
}
Demo Fiddle
Try this:
.header-wrap{
width:auto;
display:inline-block;
}
I know there must be a simple way to do this but for the life of me I can't figure it out.
I have a three column layout with a fluid center column and what I need to do is to take 3 images and distribute them evenly across the center div - such that the center image is always in the center of the center column (i.e. the center of the page) and the left image is justified left and the right image justified right.
the page uses a stripped down version of the faux absolute positioning demo as a framework, and there is no problem implementing that - but what I need is a self-contained way to arrange these three objects within the center div (column).
I have tried putting them in an Unorded List but when I float the elements to the left - well then they are floated to the left and no longer centered in the div.
I also tried doing it without the ul but have so far been unsuccessful.
any help here would be appreciated.
Let's say this is your markup:
<div class="wrapper">
<img class="first">
<img class="second">
<img class="third">
</div>
There are many ways to accomplish this, here is one way using known widths of the images:
img {
width:100px;
display:block;
}
.first {
float:left;
}
.second {
float:right;
}
.third {
margin:0 auto;
}
Demo: http://jsfiddle.net/wY6AS/
Here's another way with absolute positioning, and known widths:
.wrapper {
padding:10px;
position:relative;
}
img {
width:100px;
height:100px;
display:block;
}
.first {
position:absolute;
top:10px;
left:10px;
}
.third{
position:absolute;
top:10px;
right:10px;
}
.second {
margin:0 auto;
}
Demo: http://jsfiddle.net/wY6AS/1/
I wish I could make more demos and give better explanations, but I've got to run. Known widths makes it easy, but it is still not all that difficult with unknown widths, using display:inline-block and text-align:center on the parent element in combination with floats or absolute positioning, for example.
I don't want to suggest tables, but that's an option too if you are really desperate and can't get another method to work. Check out the CSS display properties that emulate table behavior as well.
http://jsfiddle.net/PZ5AZ/
Please advise me what to do to make text Send Vertical align middle .also please advise that these problems not came in future what can i do ?
As has been previously said vertical alignment is not really supported on anything that isn't a table cell.
But if you are just trying to center a single line of text you could use line-height. If you set the line-height to the same as the height of the element and remove any padding then the text will display in the middle of the element, just as if it is vertically aligned.
So on your example the following would work (if you remove the default styles first):
line-height:28px;
height:28px;
padding:0px;
But if the text wraps to more than one line this solution won't work, the text will suddenly become very spaced.
For a more general solution it is best to use javascript to dynamically work out the padding required for the particular element.
You can't vertically align text outside of tables so there are two options:
You play with the padding of the parent element to achieve the illusion of v-aligned text. As illustrated by Mr Long.
or
You make the parent element position:relative; and the child element absolute:
<div id='container'>
<div id='txt'>My Text</div>
</div>
#container{
position:relative;
}
#txt{
position:absolute; left:0px; top:50%;
margin-top:10px; /* half the height of the text element */
}
/* hint: for scaling attributes use %'s */
I think the first option is the simplest in your case.
Good luck Bro!
W.
if you like to center the text inside the div vertically and perhaps horizontally you can try this
#container{
position:relative;
width:200px;
height:300px;
border:1px solid #CCCCCC;
}
#txt{
position:absolute;
width:150px;
height:50px;
top:50%; left:50%;
margin-top:-25px; /* 1/2 of height */
margin-left:-75px;/* 1/2 of width */
border:1px solid #FF0000;
}
<div id="container">
<div id="txt">My Text</div>
</div>
Try this: padding: 0px 0px 4px 0px;
Add this to clear default button padding in Mozilla:
button::-moz-focus-inner {
border:0;
padding-top:0;
}