css div center multi-line text vertically and horizontally with a background image
You have some unnecessary css such as margin: -257px 0 0 -500px; left:50%;
on
top:50%; width: 1000px; height: 515px;.innie
, which is throwing off your center alignment.
I think this, what you are going for.
UPDATED
CSS
.title {
font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
font-size: 400%;
}
.subtitle {
font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
font-size: 150%;
}
.subnote {
font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
font-size: 75%;
}
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
background:url('https://placeimg.com/600/300/any')no-repeat;
background-position: center;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.innie {
text-align: center;
}
jsFiddle Demo - https://jsfiddle.net/8dphnor5/
How do I align multi line text vertically with background image set for :before
You can use display: flex
on a
element.
a { align-items: center; display: flex; width: 300px; border: 1px solid black;}
.submenu-icon:before { content: "PSEUDO"; padding: 20px;}
<a href="Consultancy-professional-services" class="submenu-icon">Consultancy & Professional Services </a>
Vertically align text next to an image?
Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
<span style="">Works.</span>
</div>
How can I center text (horizontally and vertically) inside a div block?
If it is one line of text and/or image, then it is easy to do. Just use:
text-align: center;
vertical-align: middle;
line-height: 90px; /* The same as your div height */
That's it. If it can be multiple lines, then it is somewhat more complicated. But there are solutions on http://pmob.co.uk/. Look for "vertical align".
Since they tend to be hacks or adding complicated divs... I usually use a table with a single cell to do it... to make it as simple as possible.
Update for 2020:
Unless you need make it work on earlier browsers such as Internet Explorer 10, you can use flexbox. It is widely supported by all current major browsers. Basically, the container needs to be specified as a flex container, together with centering along its main and cross axis:
#container {
display: flex;
justify-content: center;
align-items: center;
}
To specify a fixed width for the child, which is called a "flex item":
#content {
flex: 0 0 120px;
}
Example: http://jsfiddle.net/2woqsef1/1/
To shrink-wrap the content, it is even simpler: just remove the flex: ...
line from the flex item, and it is automatically shrink-wrapped.
Example: http://jsfiddle.net/2woqsef1/2/
The examples above have been tested on major browsers including MS Edge and Internet Explorer 11.
One technical note if you need to customize it: inside of the flex item, since this flex item is not a flex container itself, the old non-flexbox way of CSS works as expected. However, if you add an additional flex item to the current flex container, the two flex items will be horizontally placed. To make them vertically placed, add the flex-direction: column;
to the flex container. This is how it works between a flex container and its immediate child elements.
There is an alternative method of doing the centering: by not specifying center
for the distribution on the main and cross axis for the flex container, but instead specify margin: auto
on the flex item to take up all extra space in all four directions, and the evenly distributed margins will make the flex item centered in all directions. This works except when there are multiple flex items. Also, this technique works on MS Edge but not on Internet Explorer 11.
Update for 2016 / 2017:
It can be more commonly done with transform
, and it works well even in older browsers such as Internet Explorer 10 and Internet Explorer 11. It can support multiple lines of text:
position: relative;
top: 50%;
transform: translateY(-50%);
Example: https://jsfiddle.net/wb8u02kL/1/
To shrink-wrap the width:
The solution above used a fixed width for the content area. To use a shrink-wrapped width, use
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Example: https://jsfiddle.net/wb8u02kL/2/
If the support for Internet Explorer 10 is needed, then flexbox won't work and the method above and the line-height
method would work. Otherwise, flexbox would do the job.
How to make an image center (vertically & horizontally) inside a bigger div
Personally, I'd place it as the background image within the div, the CSS for that being:
#demo {
background: url(bg_apple_little.gif) no-repeat center center;
height: 200px;
width: 200px;
}
(Assumes a div with id="demo"
as you are already specifying height
and width
adding a background
shouldn't be an issue)
Let the browser take the strain.
Vertically centre multi-line text over an image
Created a fiddle.
Add the following css to .caption-wrapper
:
top: 50%;
transform: translateY(-50%);
-webkit-transorm: translateY(-50%); /* for Chrome */
position: absolute;
left: 0;
display: inline-block;
Also, remove the height: 100%
and width: 100%
properties from .caption-wrapper
.
css vertical align img and text (multiline) in li
I have rewrote your html to accomodate the changes.
I have applied two options:
- variable height list items.
- fixed height list items with overflow.
Fixed height list items
CLICK FOR DEMO
This option is fully browser compatible but would require manually adjustment of the top margin for each list item.
Alternatively this option could still be used with the box flex model described below.
Fix height of list item and add scroll on overflow:
height:70px;
overflow:auto;
Variable height list items
CLICK FOR DEMO
This option relies on css3 flex box model:
display:flex;
display:-webkit-flex;
align-items:center;
-webkit-align-items:center;
justify-content:center;
-webkit-justify-content:center;
Please note flex box requires browser support. It is now highly compatible with modern browsers however old versions of the useless outdated browser ie will not support it.
Users of these browsers will still have a nice viewing experience however the images will be aligned at the top of each list box and not the center.
Vertically align multi-lines text next to an image?
Let try with:
<style>
.align-middle {
vertical-align: middle;
display: inline-block;
}
</style>
<div>
<img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
<span class="align-middle">
<p>(1)I'm in the middle of the image! thanks to CSS! hooray!</p>
<p>(2)I'm in the middle of the image! thanks to CSS! hooray!</p>
<p>(3)I'm in the middle of the image! thanks to CSS! hooray!</p>
</span>
</div>
How to center an element horizontally and vertically
Approach 1 -
transform
translateX
/translateY
:
Example Here / Full Screen Example
In supported browsers (most of them), you can use top: 50%
/left: 50%
in combination with translateX(-50%) translateY(-50%)
to dynamically vertically/horizontally center the element.
.container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
Related Topics
Is There a Cross-Browser Way to Condense Text on a Page
Lesscss - Ie Gradient Filter with Variables and Lighten
Please Explain in Detail This Part of Yui3 CSS Reset
CSS Dropdown Menu Hidden Behind Content Ie7
Weird Float Rendering in Chrome When Using Media Queries
Floated Element Gets Outside of Its Parent
Select All Block Level Elements with CSS
Targeting Nth Column (Made by Column-Count)
Style Dojox Grid Row Depending on Data
Position:Fixed in Windows Phone 7
List of CSS Properties That Can Be Transitioned
Flex Items Are Shrinking Below Flex-Basis
CSS Animations End Together Even Though They Are Started at Different Times
Select: Last-Child with Especific Class Name (With Only CSS)