I would like to push the text down to be centered in the green part, but I cannot seem to figure it out. I've been messing around with it for some time, but I'm still a novice. Any help would be appreciated. I've added the HTML and CSS below.
.beerimgcontainer {
width: 300px;
height: 400px;
margin-bottom: 20px;
margin-right: 20px;
display: inline-block;
position: relative;
text-align: center;
margin-right: 10px;
overflow: hidden;
max-height: 400px;
}
.beerimgcontainer a {
text-decoration: none;
}
.beerimgcontainer span {
text-decoration: none;
font-size: 23px;
font-family: champagne;
color: black;
}
.beerimgcontainer:hover {
background: #165a11;
color: white;
box-shadow: 0px 0px 0px 2px #3c8837;
box-sizing: border-box;
}
.beerimgcontainer:hover span {
color: white;
}
<div class="beerimgcontainer">
<a href="mug.html">
<img src="images/text2.png" class="positionimg" alt="Mug">
<span>Mug</span>
</a>
</div>
img and span are inline elements. They are initially next to each other. Since your image covers the whole width (that's available; 300px on parent div), it pushes the span down. Margin on the span wouldn't work.
What you should do is to set display: block on the span and then set a margin:
.beerimgcontainer span {
display: block;
margin-top: 15px;
}
JSFiddle
Related
I have a small problem. I am trying to change the width and height of a button but for some reason, it will not let me. The button automatically stays the same width and height as the contained text.
CSS
.flexcontainer {
display: flex;
align-items: center;
overflow: hidden;
}
img[width="500"] {
border: 3px solid #5F5F5F;
border-radius:3px;
float: left;
}
#leftRetail {
display: block;
height:354px;
width: 1308px;
float:right;
text-align: center;
vertical-align: middle;
line-height: 354px;
}
.button {
width: 250px;
height: 200px;
background: #ed2626;
border-radius: 2px;
color: white;
font-weight: bold;
text-decoration:none;
}
HTML
<div class="flexcontainer">
<div>
<img src="anyImage.jpg" width="500" height="350"/>
</div>
<div id="leftRetail">
Retail Menu
</div>
</div>
You need to change your .button to use display: block or inline-block:
.button {
display: block;
width: 250px;
height: 200px;
background: #ed2626;
border-radius: 2px;
color: white;
font-weight: bold;
text-decoration:none;
}
CHANGED ANSWER after copying the original code into a snippet:
I just realized that the whole thing is inside a flex container, which makes all child elements flex items automatically. (BTW: The float parameters have no effect in this case)
So, one method to add width and height to your .button is to give it some padding, as shown below:
.flexcontainer {
display: flex;
align-items: center;
overflow: hidden;
}
img[width="500"] {
border: 3px solid #5F5F5F;
border-radius: 3px;
}
#leftRetail {
height: 354px;
width: 1308px;
text-align: center;
vertical-align: middle;
line-height: 354px;
}
.button {
background: #ed2626;
border-radius: 2px;
color: white;
font-weight: bold;
text-decoration: none;
padding: 8px 12px;
}
<div class="flexcontainer">
<div>
<img src="anyImage.jpg" width="500" height="350" />
</div>
<div id="leftRetail">
Retail Menu
</div>
</div>
You cannot modify the width and height of inline elements, manually.
Add display: block; (or inline-block) to your .button block, and you can observe that the height and width changes are you define it.
Only block elements may have their width and height set specifically.
Your button should now look like:
.button {
width: 250px;
height: 200px;
background: #ed2626;
border-radius: 2px;
color: white;
font-weight: bold;
text-decoration:none;
display: block;
}
Just make it block-level element by adding display:bock to its style. Then you can apply whatever style you want!
Regarding https://jsfiddle.net/postiffm/74cxr092/
> <div id="Tagline">
> I'm in the center.
> <div id="TaglineLeft"></div>
> <div id="TaglineRight">I am a phone #</div> </div>
How can I align the text in the TaglineRight so it has some space above it like the text in the center section? I've tried some padding and margin stuff, but nothing seems to work.
Thanks.
add line-height:30px; to #TaglineRight a
#TaglineLeft, #TaglineRight {
position: absolute;
color: white;
font-weight: normal;
text-align: center;
height: 100%;
width: 30%;
top: 0;
border-radius: 7px;
height: 20px;
padding: 5px;
}
you may add height: 20px; and padding: 5px; to #TaglineLeft, #TaglineRight { class
an old fashion way is to treat the child element as an table data by set it to display: table-cell, vertical-align: middle; & set it's parent to display: table;.
in that way you can change the height of the parent to whatever/whenever you like to and the child element will always stay vertical aligned. not like CSS3 solutions, it will work in old browsers too and cross browser support of course.
https://jsfiddle.net/ryf0w7rp/ - try to change the "#Tagline" element's height from 20px to other value and see the result.
*if you don't want main wrapper elements to use display: table so you can create another level of element to use display: table.
*for the example i made the solution just for the "#TaglineRight" element which has an inner <a> element. to make the other elements work the same, add the same structure and set the CSS to the right elements.
Instead of playing around with position:absolute/relative.
Consider using display:flex
check this solution
#Tagline {
color: white;
font-weight: normal;
letter-spacing: 2px;
text-align: center;
margin-bottom: 10px;
border: 0 solid #ff9706;
border-radius: 7px;
background-color: #ff9706;
display: flex;
height:30px;
line-height: 30px;
justify-content: space-between;
}
#TaglineLeft,
#TaglineRight {
color: white;
height: 100%;
width: 30%;
border-radius: 7px;
text-align: center;
}
#TaglineLeft {
margin-top: 0px;
background-color: #6673aa;
order: -1;
}
#TaglineRight {
border: 0 solid #7e922e;
background-color: #7e922e;
}
#TaglineRight a {
color: white;
letter-spacing: 1px;
text-decoration: none;
}
<div id="Tagline">
I'm in the center.
<div id="TaglineLeft">left line</div>
<div id="TaglineRight">I am a phone #
</div>
</div>
Hope it helps
I have the following simple code snippet. It is taken out from my application where .a1 is a container button, which has an icon. The icon should be vertically middle aligned to the parents line-height/height, but it is shifted with 1px from top. Could you explain me why this is the behavior? Is there any solution?
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
Why?
Because inline-block elements render with "white-space". You can see this in this demo where no height/width is set on the parent element.
When you use vertical-align:middle; the "white space" is rendered before the element (on top) (black line in the demo). This space moves the child element down and therefore it doesn't appear verticaly centered.
how to fix :
You can use display:block; and calculate the margin to apply to the child element so it centers verticaly and horzontaly.
You can also take a look at this question which talks about white space and ways to avoid them.
Well, it seems like font-size:0; for .a1 seems also a fix for such issue.
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
font-size: 0;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00
I am trying to center the flame and the heading to the middle of the white box.
HTML
<div class="contentheading">
<div class="floatmiddle">
<img src="images/flame45x45.png">
<h3>Receive only the email you want.</h3>
</div>
</div>
CSS
.contentheading {
position: relative;
height: 45px;
margin-top: 30px;
width: 636px; //this is the full width of the white box//
}
.floatmiddle {
margin: 0 auto;
height: 45px;
display: block;
}
.contentheading img {
position: absolute;
}
.floatmiddle > h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
height: 45px;
line-height: 45px;
margin: 0 0 0 60px;
text-align: center;
vertical-align: top;
position: absolute;
}
I need the .float middle to inherit the width of the two enclosing elements - the image (45 x 45px) and the text (which will be different length for each chapter i have) so i need one class/formula so i can just go through and pop in the headings and no matter the headings length the heading and the fireball will be centered within the white div.
You can use display: inline-block; to center this div.
http://jsfiddle.net/d8gyd9gu/
HTML
<div class="contentheading">
<div class="floatmiddle">
<img src="http://www.neatimage.com/im/lin_logo.gif" alt="">
<h3>Receive only the email you want.</h3>
</div>
</div>
CSS
.contentheading {
height: 45px;
margin-top: 30px;
width: 636px;
text-align: center;
}
.floatmiddle {
height: 45px;
display: inline-block;
}
.contentheading img {
float: left;
margin: 20px 10px 0px 0px;
}
.floatmiddle > h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
height: 45px;
line-height: 45px;
padding: 0px 0px 0px 60px;
}
If you can use flexbox you can do it really simply like this:
.contentheading {
border: 1px dashed #ff0000;
margin-top: 30px;
width: 636px;
display: flex;
justify-content: center;
align-items: center;
}
.contentheading h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
}
<div class="contentheading">
<img src="images/flame45x45.png" width="45" height="45" />
<h3>Receive only the email you want.</h3>
</div>
If you need to support older browsers make sure you add the prefixed versions.
You can definitely pare your markup and styling down. If you only need to center the text and the image in a div of a fixed width, you can simply use text-align: center on the parent container, and display: inline-block on the two elements within. The following markup and styling is about as little as you need:
HTML
<div class="content-heading">
<img src="images/flame45x45.png">
<h3>Receive only the email you want.</h3>
</div>
CSS
.content-heading {
background-color: #ccc;
height: 45px;
margin: 0 auto; /** Centers on the page **/
text-align: center;
width: 636px;
}
h3 {
display: inline-block;
line-height: 45px; /** Only really works if you can rely on only displaying one line of text **/
margin: 0;
overflow: hidden; /** Need this to keep inline-block elements from staggering **/
padding: 0;
}
img {
background-color: black; /** Purely so we can see this **/
display: inline-block;
height: 45px;
width: 45px;
}
That's really all you need.
Codepen sketch
I have been trying to align two elements, a h2 and a div side by side without having one of them colapse when the window changes to a smaller size. I've searched the web a bit but found nothing similar that would help and my solutions just wouldn't work so I though here there would be someone able to help me.
So I want it to be displayed like this at all times:
https://imagizer.imageshack.us/v2/912x135q90/631/ZYR7sc.png (Can't post images sorry!)
But when window size changes dispite the fact the div should adapt at some point it just breaks to next line:
https://imagizer.imageshack.us/v2/730x144q90/912/yRBpkc.png
Here is my code on this one:
HTML
<div id='pagetitle'>
<h2 id='subtitle'>Weapons</h2>
<div id='hline'></div>
</div>
CSS
#pagetitle { /* This div is for centering both of the elements. */
width: 90%;
margin: 0 auto;
display: block;
}
#subtitle {
display: inline-block;
color: #72c9b9;
font-size: 30px;
font-weight: 300;
text-align: center;
}
#hline {
display: inline-block;
background-color: #72c9b9;
width: 70%;
height: 1px;
position: relative;
bottom: 4px;
margin-left: 20px;
}
So this is it guys, any sugestions? Thanks in advance.
cs.almeida
Here's a way how to do it:
demo
<div id='pagetitle'>
<h2 id='subtitle'><span>Weapons</span></h2>
</div>
#pagetitle {
width: 90%;
margin: 0 auto;
display: block;
}
#subtitle {
border-bottom: #72c9b9 solid 2px;
height: 18px;
display: block;
color: #72c9b9;
font-size: 30px;
font-weight: 300;
}
#subtitle > span {
background-color: white;
padding: 10px 20px;
}