How do you center an image with text inside a block?
I know you can center a block inside another block by giving the latter a fixed width and margin: auto. However, I don't know the dimensions of text beforehand (actual text content may vary).
The CSS I have got so far:
.outer {
width: 400px;
}
.outer table {
border: 0;
width: 100%;
}
.outer table td {
vertical-align: middle;
text-align: center;
}
.outer table td p {
text-align: left;
}
Please take a look at this DEMO
Here is my css:
.block {
text-align: center;
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.centered {
display: inline-block;
vertical-align: middle;
}
.left {
float: left;
}
Explanation about :before element:
This is an invisible element pseudo element, which is used for better vertical centering: it emulates a 0-sized inline-block element, which, in conjunction with normal inline-block element (.centered) allows us to use vertical-align.
UPDATE:
You can set height to .block to see how it will be centered vertically:
http://jsfiddle.net/jb5EJ/5/
UPDATE 2: Is this closer: http://jsfiddle.net/jb5EJ/13/
Checkout this link. I hope you will get the solution.
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
TLDR: with only this CSS you can position an element in absolute center (both horizontally and vertically):
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Add vertical-align:middle; to img too....also, i would suggest to add height to outer class
<img src="some_src" style="vertical-align:middle;" /> I have some text too
demo to get u started
Related
Demo
.subject_container
{
width: 200px;
height: 250px;
border: 1px solid #eee;
display: table-cell;
}
.subject
{
border-radius: 50%;
border: 1px solid #653;
width: 175px;
height: 175px;
margin: auto;
margin-top: 25%;
position: relative;
}
.subject div
{
text-align: center;
}
I can understand that my content AB DE VILLIERS/IKER CASSILAS are inside .subject div only. But i am using border-radius:50% to make my div a circular. How can i fit my content inside my circular div? i want solutions to work even if i change the size of my div.
Any suggestions?
You need to add line-height to the .subject and set it to the same width and height of your .subject. Then you need to wrap your content inside your .subject with another div. Then apply the following CSS to it:
.subject_wrapper
{
line-height: normal;
display: inline-block;
vertical-align: middle;
}
jsFiddle Example: here
EDIT: If you want the font-size to change if the text tries to overflow, you need to use JavaScript.
Example post on how to do this: Auto-size dynamic text to fill fixed size container
EDIT 2: If you just want overflow: hidden; applied to anything outside of the circle just add overflow: hidden; to the .subject.
Example: http://jsfiddle.net/trLhdj4e/3/
Try This:
.subject div
{
text-align: center;
position:relative;
top:50%;
}
You need wrap subject_name and subject_completion in a new div. So, apply absolute center to this div. For that, add follow styles to new div:
.wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
Also, you should declarate height and width for .wrapper if you need it.
Try this approach:
.subject div
{
display: table-cell;
text-align: center;
vertical-align:middle;
height: 175px;
}
Demo
With overflow:hidden;
Demo
using this css I am able to center the image, however, the image now floats on top of the text. Originally I had the top at 0 all around, but these dimensions get the image correctly centered. What can I do to keep the next line of text below the image and not under?
img.center {
position: absolute;
top: 40px; bottom:50px; left: 105px; right:105px;
margin: auto;
}
Absolute positioning takes the image "out of the flow". To keep it in the document flow you could use something like:
If you know the height of the parent:
.parent {
line-height: 100px;
}
.parent img {
vertical-align: middle;
}
If you don't know the height:
.parent {
display: table;
}
.parent img {
display: table-cell;
vertical-align: middle;
}
I know there is a lot of similair questions but none of them helped me to solve this. I have very simple setup:
.wrapper {
width: 100%;
display: table;
}
.dontBreakmyLine {
display: table-cell;
}
.iCanUseWhatIsLeft {
display: table-cell;
}
<div class="wrapper">
<div class="dontBreakmyLine">
Some generated text
</div>
<div class="iCanUseWhatIsLeft">
Another generated text
</div>
</div>
Now I need to stretch first div to content and let the another one take remaining space. I know that maximum width of generated text in first div will be 300px, but max-width dont work here as I would like. Any suggestions please?
There is probably a better way, but if you're okay with the line not breaking you can set the left cell to a small width and set the text not to break on whitespaces
Here is a fiddle
http://jsfiddle.net/hqWaU/
.wrapper {
width: 100%;
display: table;
}
.dontBreakmyLine {
display: table-cell;
width: 1px;
white-space:nowrap;
}
.iCanUseWhatIsLeft {
display: table-cell;
}
div {
border: 1px solid silver;
}
A possible solution without display: table; would be to set both boxes to position: relative;, float the left and stretch the right one with right: 0px; (DEMO).
.wrapper {
width: 100%;
}
.dontBreakmyLine {
max-width: 300px;
float: left;
position: relative;
z-index: 2;
}
.iCanUseWhatIsLeft {
position: relative;
right: 0px;
z-index: 1;
}
The text will break as soon as it's longer than 300px but If it won't be longer it doesn't matter. Add display: table-cell back to the boxes if you don't want the right text flow under the left text.
If you still wan't to prevent the line-break you can use white-space:nowrap; maybe even in combination with overflow: hidden; (DEMO).
I'm currently in planning stage for a site, which needs to scroll horizontally.
The simplest solution I have to tackle this is to go in this direction, JSFiddle.
I'm not sure if this is the best option, as I will have to arrange each div individually i.e. left: 100% left: 200%;.
Is there a way around the divs, with a display: inline-block value auto wrapping to the viewport, so I don't have to arrange each div individually?
Removing the absolute positioning
What you need to do here is remove the float and absolute positioning from your dividers and simply add white-space: nowrap to your body. As your dividers are set to display as inline-block, these get affected by the white-space property.
body {
margin: 0; padding: 0;
white-space: nowrap;
}
.full {
width: 100%;
height: 100%;
display: inline-block;
}
JSFiddle demo.
Removing the spaces between each block
Now that we've removed the floats and the positioning, you'll notice that there is a white space between each divider. If we refer to this CSS Tricks article, we can remove this by simply giving the body a font-size of 0, and giving each divider a font-size of what you're wanting the font size to be within those blocks:
body {
margin: 0; padding: 0;
white-space: nowrap;
font-size:0;
}
.full {
width: 100%;
height: 100%;
display: inline-block;
font-size:16px;
}
Second JSFiddle demo.
http://jsfiddle.net/MsRCS/3/
You can remove the absolute positioning and use float instead.
body {
margin: 0; padding: 0;
width:300%;
}
.full {
width: 33.3%;
height: 100%;
display: inline-block;
float: left;
}
#screen-1 {
background: red;
}
#screen-2 {
background: blue;
}
#screen-3 {
background: yellow;
}
I have this code: http://jsfiddle.net/5qLDz/ inside which I want to have images vertically aligned to bottom of the container (with some padding from container itself). It doesn't work even with li having display: table-cell and both li and img having vertical-align:bottom set. What can it be?
Please stop posting solutions using position: absolute. As you can see in my code, I used text-align: center which is important there.
One simple fix is to set the line-height to be the same as the container height:
ul.thumbnails li {
box-sizing: border-box;
text-align: center;
background: grey;
padding-bottom: 22px;
height: 222px;
line-height: 222px;
display: table-cell;
}
ul.thumbnails li img {
border-radius: 5px;
bottom: 22px;
vertical-align: bottom;
}
That seems to work, http://jsfiddle.net/audetwebdesign/5qLDz/20/
You only need to declare vertical-align: bottom on the img rule.
However, if you add other elements like captions or social media links this could affect how you implement the solution.
For the love of god don't use display:table-cell just to vertically align something. Just using relative positioning will also do this far more easily: forked Fiddle.
Only changed the parent to position:relative and the child to position:absolute.
Update your CSS:
div.left section.box ul.thumbnails {
margin: 0;
padding: 0;
}
ul.thumbnails li {
text-align: center;
background: grey;
height: 222px;
position:relative;
}
ul.thumbnails li img {
border-radius: 5px;
bottom: 22px;
position:absolute;
}