I've been running into an issue trying to vertically center an image and text together. I cannot get the image to align with the text, and even when I think it is centered, changing the browser size ruins it.
.icon-button-with-text-wrapper {
border: 1px solid #7e898a;
background-color: white;
box-sizing: border-box;
display: table;
margin-top: 10px;
padding: 10px;
font-size: 1.5em;
width: 100%;
height: 100%;
}
.icon-button-with-text-wrapper img {
margin-right: 10px;
max-height: 50px;
max-width: 50px;
vertical-align: middle;
float: left;
}
p {
vertical-align: middle;
}
}
<div class="icon-button-with-text-wrapper"><img typeof="foaf:Image" src="http://i.imgur.com/YjcaGSx.png" width="100" height="100" style="
padding-top: 10p;
" align="middle"><p>Speak to an Admissions Counselor<p></div>
I've tried vertical-align: middle, display: table-cell (and others), and different positions, along with adjusting the height, margins, etc. I've also looked at several other similar questions such as this one, this one and this one. However, none of those offered a solution that worked in this instance.
maybe so?
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.icon-button-with-text-wrapper {
border: 1px solid #7e898a;
background-color: white;
display: table;
margin-top: 10px;
padding: 10px;
font-size: 1.5em;
width: 100%;
height: 100%;
}
.icon-button-with-text-wrapper > .item{
display: table-cell;
vertical-align: middle;
}
.icon-button-with-text-wrapper > .item:nth-of-type(1){
width: 60px;
text-align: center;
}
.icon-button-with-text-wrapper img {
max-height: 50px;
max-width: 50px;
}
<div class="icon-button-with-text-wrapper">
<div class="item">
<img src="http://i.imgur.com/YjcaGSx.png" alt="" />
</div>
<div class="item">
<p>Speak to an Admissions Counselor<p>
</div>
</div>
Fiddle
Hope this will help.
<html>
<head>
<title>Flaticon WebFont</title>
<style>
.icon-button-with-text-wrapper {
border: 1px solid #444;
box-sizing: border-box;
padding: 10px;
font-size: 1.0em;
vertical-align: middle;
font-size: 1.3em;
}
.icon-button-with-text-wrapper img {
width: 50px;
height: 50px;
float: left;
vertical-align: middle;
padding: 10px;
}
</style>
</head>
<body>
<div class="icon-button-with-text-wrapper">
<img typeof="foaf:Image" src="http://i.imgur.com/YjcaGSx.png">
<p>Speak to an Admissions Counselor<p>
</div>
</body>
</html>
You don't need to float the image or put the text in its own block (p).
.icon-button-with-text-wrapper {
border: 1px solid #7e898a;
background-color: white;
box-sizing: border-box;
display: table;
margin-top: 10px;
padding: 10px;
font-size: 1.5em;
width: 100%;
height: 100%;
}
.icon-button-with-text-wrapper img {
margin-right: 10px;
max-height: 50px;
max-width: 50px;
vertical-align: middle;
}
<div class="icon-button-with-text-wrapper"><img typeof="foaf:Image" src="http://i.imgur.com/YjcaGSx.png" width="100" height="100">Speak to an Admissions Counselor</div>
Related
I wish to move the matcha img to the right, and to have the text below them. I tried using margin-left and margin-bottom but it did not help.
#hotlatte img {
border: solid #664d00;
border-width: 5px;
border-radius: 60px;
width: 300px;
height: 400px;
padding: 10px;
}
#matcha img {
border: solid #664d00;
border-width: 5px;
border-radius: 60px;
width: 300px;
height: 400px;
padding: 10px;
}
.namesofdrinks {
font-style: italic;
font-size: 28px;
color: #804500 ;
font-family:'Courier New', Courier, monospace;
}
<div id="hotlatte">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Latte_art_3.jpg/1920px-Latte_art_3.jpg" alt="coffe latte" />
</div>
<h3 class="namesofdrinks">Coffe latte</h3>
<div id="matcha">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Matcha_%286328677556%29.jpg/1920px-Matcha_%286328677556%29.jpg" alt="matcha">
<h3 class="namesofdrinks">Matcha Coffe</h3>
</div>
First, need to group the image and text using div. follow the code.
<div id="hotlatte">
<img src="images/caffe.jpg" alt="coffe latte" />
<h3 class="namesofdrinks"> Coffe latte</h3>
</div>
<div id="matcha">
<img src="images/matcha.jpg" alt="matcha">
<h3 class="namesofdrinks"> Matcha Coffe</h3>
</div>
Then try this CSS code.
#hotlatte {
float: left;
width: 50%;
}
#hotlatte img {
width: 100%;
height: auto;
}
#matcha {
float: right;
width: 50%;
}
#matcha img {
width: 100%;
height: auto;
}
.namesofdrinks {
clear: both;
text-align: center;
margin-top: 10px;
}
I am using float: left to stack two divs side by side. I am then using clear: block to clear the float, but a small white space appears between the floated divs and the next div.
I have added overflow: none to every element on the page because I saw that as the solution that worked for other people with a similar issue, but that didn't fix the issue.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: -60px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
EDIT: I know I can add a negative margin-top to the '#featured' box, but I would really like to understand why this problem exists.
Try changing the inline-block to inline-flex
#featured-header {
display: inline-flex;
width: 240px;
height: 30px;
}
Set font-size: 0; on the parent element. The space is a character space, so setting the font-size to zero makes the size of the space zero as well. But, you'll need to set the font size of the inline-block child elements back to your desired size.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: 0px;
font-size:0px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
font-size:18px;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
font-size:16px;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
I've got to center an image within a div-container with fixed sizes.
My first idea was: img is an inline-element. So you can use text-align: center. As with text.
But that doesn't work.
I've made this demo:
.wrap {
height: 1000px;
width: 1000px;
background-color: lightGrey;
margin: 20px auto;
border: 1px solid black;
}
.wrap img {
border-radius: 12px;
text-align: center;
}
.wrap p {
text-align: center;
font-size: 2rem;
font-weight: 900;
}
<div class="wrap">
<img src="https://placebear.com/200/300" alt="bild" />
<p>Just a little bit of placeholder-text.</p>
</div>
One can see: Text centering works perfectly. But image centering fails.
What did I do wrong here? Respectively: Which of my assumptions are wrong?
.wrap {
text-align: center;
}
use this
text-align affects the inline content of an element.
The image isn't the content of the <img>, it is the <img>.
For text-align to affect it, you must apply the property to the parent of the <img>.
hi img is inline eliment so you can not add text-align: center; to image
add parent div to check this
.wrap {
height: 1000px;
width: 1000px;
background-color: lightGrey;
margin: 20px auto;
border: 1px solid black;
text-align: center;
}
.wrap img {
border-radius: 12px;
text-align: center;
}
.wrap p {
font-size: 2rem;
font-weight: 900;
}
<div class="wrap">
<img src="https://placebear.com/200/300" alt="bild" />
<p>Just a little bit of placeholder-text.</p>
</div>
Your .wrap class should have text-align: center
.wrap {
height: 1000px;
width: 1000px;
background-color: lightGrey;
margin: 20px auto;
border: 1px solid black;
text-align: center;
}
.wrap img {
border-radius: 12px;
}
.wrap p {
text-align: center;
font-size: 2rem;
font-weight: 900;
}
<div class="wrap">
<img src="https://placebear.com/200/300" alt="bild" />
<p>Just a little bit of placeholder-text.</p>
</div>
Just add this to your CSS
img {
display: block;
margin: 0 auto;
}
Just add
margin: 0 auto;
display: block;
Thus it should be :
.wrap img {
border-radius: 12px;
margin: 0 auto;
display: block;
}
Or you can also add text-align:center to .wrap
Here is the fiddle:
Add style in wrap in class text-align: center;
.wrap {
height: 1000px;
width: 1000px;
background-color: lightGrey;
margin: 20px auto;
border: 1px solid black;
text-align: center;
}
.wrap img {
border-radius: 12px;
}
.wrap p {
text-align: center;
font-size: 2rem;
font-weight: 900;
}
<div class="wrap">
<img src="https://placebear.com/200/300" alt="bild" />
<p>Just a little bit of placeholder-text.</p>
</div>
I'm trying to get 2 divs on the same line, but alligned differently. Here is a pic of what I have right now and what I want:
[pic removed by poster]
and here is the code I've got:
<div class="newsdiv">
<div class="picdiv" style="background-image: url('[...]');"></div>
<div class="titlediv">
<font size="4">', $row['title'], '</font>
</div>
<div class="textdiv">
<font size="1">This is some dummy text</font>
</div>
<div class="linksdiv">
[Read More...]
<div class="statsdiv">
Views: 0 , Comments: 0
</div>
</div>
</div>
and the stylesheet:
.newsdiv{
overflow: hidden;
height: 126px;
width: 100%;
padding: 5px;
border: 2px solid black;
display: inline-block;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.picdiv{
width: 220px;
height: 110px;
border: 1px solid #444;
background-repeat: no-repeat;
background-position: center;
background-size: 382px 120px;
float: left;
}
.titlediv{
height: 20px;
text-align: center;
}
.textdiv{
overflow: hidden;
margin-top: 8px;
height: 70px;
text-align: center;
}
.linksdiv{
font-size: 8pt;
text-align: center;
height: 10px;
}
.statsdiv{
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
}
Any ideas of how to do this? Thanks!
You need float here
.statsdiv {
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
float: right; /* Add this */
}
May be there will be more cleaner solution but you can try this for now
.linksdiv > a{
margin-left:12%;
}
Updated Demo
You can use the position: absolute; on your .statsdiv and position:relative; on .linksdiv to achieve what you want. I guess using float will be too much for this.
Updated CSS(modified classes only):
.linksdiv{
font-size: 8pt;
text-align: center;
height: 10px;
position: relative; /*added*/
}
.statsdiv{
font-size: 7pt;
/* text-align: right; not required */
display: inline-block;
height: 10px;
position: absolute; /*added*/
right: -0.5%; /*added*/
}
FIDDLE
Consider this working css. Here is Demo
.statsdiv {
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
float: right;/*added*/
}
Add this to your .statsdiv css
float:right;
here is the fiddle http://jsfiddle.net/cc68d/
Edit :- Although this works, as pointed out by you , it does not align Read More[..] in center. Actually the issue is with the design part. I will not go into details. You can correct this by adding style="padding-left:100px;" to your ReadMore[..] <a> tag attribute.
as shown here http://jsfiddle.net/cc68d/1/
Replace your total css code, You need float on the class .statsdiv
Your total modified code is:
.newsdiv{
overflow: hidden;
height: 126px;
width: 100%;
padding: 5px;
border: 2px solid black;
display: inline-block;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.picdiv{
width: 220px;
height: 110px;
border: 1px solid #444;
background-repeat: no-repeat;
background-position: center;
background-size: 382px 120px;
float: left;
}
.titlediv{
height: 20px;
text-align: center;
}
.textdiv{
overflow: hidden;
margin-top: 8px;
height: 70px;
text-align: center;
}
.linksdiv{
font-size: 8pt;
text-align: center;
height: 10px;
}
.statsdiv {
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
float: right; /* Add this */
}
You could make your div go out of the flow making its position absolute :
.statsdiv{
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
position: absolute;
align: right;
padding: 0 15px;
width: 96%;
left: 0;
}
Needs a little tuning to make it right in all definitions though...
Add a third div with a width of how ever wide you need it with no content between them - a place holder div ...remember to float right , text align and a margin as well.
I have a div box that I would like at a min-height: 33px; and word-wrap to increase the height, when greater than that height. Here's a fiddle that does work http://jsfiddle.net/PzfF7/! Any reasons it does this locally with only height:33px; :
& (fiddle style)
<div class="outerDiv">
<div class="messages">
<div class="topMessage">
new message that is really long and should be on multiple lines as this continues on to the next line and so on and so forth
</div>
</div>
<div class="comments">
<div class="comment">Here's a comment</div>
</div>
</div>
For whatever reason, setting the min-height: 33px; does not work, only height: 33px;.. And word-wrap or overflow-y: auto; (less preferable) don't work at all..
.outerDiv {
width: 260px;
}
.messages {
float: left;
min-width: 100%;
max-width: 100%;
min-height: 33px;
border: 1px solid #999;
display: table;
padding: 1%;
font-size: 12.9px;
}
.topMessage {
display: table-cell;
vertical-align: middle;
padding-left: 2%;
font-size: 12.9px;
}
.comments {
float: left;
min-width: 100%;
max-width: 100%;
height: 33px;
border: 1px solid #000;
padding: 1%;
display: table;
}
.comment {
display: table-cell;
vertical-align: middle;
padding-left: 2%;
padding-right: 2%;
font-size: 12.9px;
}
As #ChristianVarga pointed out: "Do you have line-height: 0 anywhere on your local copy?"
An inherited line-height: 0; was the interfering style.