I'm trying to center (align horizontally) a button on my email template. Here is my current code:
<p class="product-link" style="text-align:left; width:60%; display:inline-block; vertical-align:middle;">
<span>
<a style="color:#000000; background:#F4D079; padding:10px 15px; display:inline-block; margin-bottom:10px; text-decoration:none; border-radius:5px; font-size:14px;" href="https://www.amazon.com/review/review-your-purchases/ref=?_encoding=UTF8&asins=[[PRODUCT_ASIN]]">Share your opinion</a>
</span>
<br>
</p>
I know this is an amateur question and I apologize, I've tried a million things and haven't gotten anything to work.
Removed unnecessary styles (width:60%; display:inline-block;),and added style to center the button(text-align: center;).
<p class="product-link" style="text-align: center;vertical-align:middle;">
<span><a style="color:#000000; background:#F4D079; padding:10px 15px; display:inline-block; margin-bottom:10px; text-decoration:none; border-radius:5px; font-size:14px;" href="https://www.amazon.com/review/review-your-purchases/ref=?_encoding=UTF8&asins=[[PRODUCT_ASIN]]">Share your opinion</a></span><br>
<script type="text/javascript">
</script>
</p>
Set the parent element to display block and the button to margin-left and margin-right auto :)
Related
I am trying to find the correct way to write text next to an Font Awesome Icon. I would like the text to line up next to the icon, and when the text is lengthened (or the display width is shortened), I would like to to wrap next to the icon in multiple rows of text instead of under the icon.
<div class="row">
<div class="col-lg-9 col-md-8 col-sm-12 col-xs-12">
<h1 id="title">Title
</h1>
<table id="iiij" align="left" border="0" cellpadding="1" cellspacing="1">
<tbody>
<tr class="row">
<td class="cell">
</td>
</tr>
</tbody>
</table>
<div id="header">
<h4>Header
</h4>
<br/>
<div id="box.img">
<i class="fas fa-home">
</i>
<p id="content"> This icon is a picture of a house. I want the text to wrap square so is does not load below the icon. When the display is changed, for mobile users, it jumps below the icon.
</p>
</div>
</div>
<div class="form-container margin-top-40">
</div>
</div>
</div>
<style>#iiij{
width:100%;
}
.fas.fa-home{
font-size:36px;
align-self:start;
float:left;
}
#box.img{
font-size:10em;
color:rgb(32, 61, 133);
padding-left:10px;
float:left;
margin-top:16px;
margin-left:20px;
margin-right:20px;
margin-bottom:16px;
clear:left;
display:inline-block;
}
#title{
color:rgb(32, 61, 133);
margin-top:21.44px;
margin-left:20px;
margin-right:20px;
margin-bottom:21.44px;
}
#header{
color:rgb(32, 61, 133);
margin-top:21.28px;
margin-left:20px;
margin-right:20px;
margin-bottom:21.28px;
}
#content{
color:rgb(85, 85, 85);
margin-top:16px;
margin-left:20px;
margin-right:20px;
margin-bottom:16px;
float:left;
align-self:start;
display:inline-block;
clear:inherit;
}
</style>
https://codepen.io/MSchleicher/pen/wONzPb
I would like the icon to align to the left side of the page, and the text to be next to it, as if they were separate columns of content.
Consider switching #box.img to display as flex.
#box.img {
display: flex;
}
This gives the layout you want. From there, just adjust the padding as needed.
More information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
I have a few elements which will contain a fixed size image and some text of variable length below, one nasty behaviour I noticed when texts are larger than the text container height where the div element grows but doesn't push down elements displayed below (Body has flex display with direction column) so that would be the preferable outcome right?
This is what I'm talking about: https://imgur.com/a/MjwOxXX
Notice how the upper section is taking space from the lower section by overlapping over it instead of the whole container growing and pushing down the lower section.
This is my code:
body{display:flex; flex-direction:column; height:auto; font-family:Roboto Slab; position:relative; scroll-bahaviour:smooth;}
*{box-sizing:border-box; margin:0; padding:0;}
a{text-decoration:none;}
.squared_maincontainer{width:100%; height:auto; display:flex; flex-direction:column;}
.squared_title{width:100%; height:100px; display:flex; justify-content:center; align-items:center; font-size:37px; font-weight:500; color:rgba(0,0,0,0.8);}
.squared_contents_container{width:100%; height:auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.squared_content_container{width:32%; height:auto; display:flex; flex-direction:column; margin:10px 0px;}
.squared_content_image{width:100%; height:260px; outline:1px solid rgba(0, 0, 0, 0.3); background-repeat:no-repeat; background-size:cover;}
.squared_content_texts_container{width:100%; height:145px; display:flex; flex-direction:column; padding:10px; position:relative;}
.squared_content_texts_title{ width:100%; font-weight:500; font-size:17px; color:var(--main_color); margin-bottom:10px;}
.squared_content_texts_description{width:100%; height:auto; font-weight:500; oveflow:hidden; font-size:14px; color:rgba(0, 0, 0, 0.9); margin-bottom:10px;}
.squared_content_texts_link{width:100%; font-size:14px; color:var(--main_color); font-weight:400; text-align:right; marin-top:auto;}
.menu_maincontainer{width:100%; height:auto; display:flex; flex-direction:column;}
.menu_title{width:100%; height:100px; display:flex; justify-content:center; align-items:center; font-size:37px; font-weight:500; color:rgba(0,0,0,0.8);}
.menu_contents_container{width:100%; height:auto; display:flex; justify-content:space-around; flex-wrap:wrap;}
.menu_content_image_container{width:32%; height:280px; box-shadow:3px 3px 3px rgba(0,0,0,0.1); background-size:cover; position:relative; }
.menu_content_texts_container{width:100%; height:auto; position:absolute; bottom:0px; left:0px; background-color:rgba(0,0,0,0.7); display:flex; flex-direction:column; padding:10px;}
.menu_content_texts_title{font-size:18px; font-weight:400; color:var(--main_color);}
.menu_content_texts_description{font-size:15px; font-weight:400; color:white;}
<div class="squared_maincontainer push" style="">
<span class="squared_title" style="">Eventos</span>
<div class="squared_contents_container" style="">
<a href="" class="squared_content_container" style="">
<div class="squared_content_image" style="background-image:url('img/dogs22.jpg');"></div>
<div class="squared_content_texts_container" style=" ">
<span class="squared_content_texts_title" style="">When our dog is afraid of men</span>
<span class="squared_content_texts_description" style="">One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend doesn’t live up One common dog fear is that of men — but is it normal and can it be fixed? One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend doesn’t live up One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend doesn’t live up to...</span>
<span class="squared_content_texts_link" style="">Read More</span>
</div>
</a>
<a href="" class="squared_content_container" style="">
<div class="squared_content_image" style="background-image:url('img/dogs12.jpg');"></div>
<div class="squared_content_texts_container" style=" ">
<span class="squared_content_texts_title" style="">When our dog is afraid of men</span>
<span class="squared_content_texts_description" style="">One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend doesn’t live up to...</span>
<span class="squared_content_texts_link" style="">Read More</span>
</div>
</a>
<a href="" class="squared_content_container" style="">
<div class="squared_content_image" style="background-image:url('img/dogs2.jpg');"></div>
<div class="squared_content_texts_container" style="">
<span class="squared_content_texts_title" style="">When our dog is afraid of men</span>
<span class="squared_content_texts_description" style="">One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend doesn’t live up to...</span>
<span class="squared_content_texts_link" style="">Read More</span>
</div>
</a>
</div>
</div>
<div class="menu_maincontainer push" style="">
<a class="menu_title" href="" style="">Título de sección</a>
<div class="menu_contents_container" style="">
<div class="menu_content_image_container" style="background-image:url('img/dogs32.jpg');">
<div class="menu_content_texts_container" style="">
<a class="menu_content_texts_title" href="" style="">Titulo</a>
<a class="menu_content_texts_description" href="" style="">Descripción del titulo</a>
</div>
</div>
<div class="menu_content_image_container" style="background-image:url('img/dogs30.jpg');">
<div class="menu_content_texts_container" style="">
<a class="menu_content_texts_title" href="" style="">Titulo</a>
<a class="menu_content_texts_description" href="" style="">Descripción del titulo</a>
</div>
</div>
<div class="menu_content_image_container" style="background-image:url('img/dogs22.jpg');">
<div class="menu_content_texts_container" style="">
<a class="menu_content_texts_title" href="" style="">Titulo</a>
<a class="menu_content_texts_description" href="" style="">Descripción del titulo</a>
</div>
</div>
</div>
</div>
I have reviewed your code and I noticed the .squared_content_texts_container class fixes the description text height to 145px. This is why when the height of the first box grew it didn't adjust the height of the parent div.
Try removing the 145px height from the .squared_content_texts_container class, or setting the min-height to 145px instead.
Then, the three flex boxes will vertically align in the middle but if you want them to be top-aligned, you must use the align-self: flex-start; styling on the .squared_content_container class.
Please see this jsFiddle with the result.
https://jsfiddle.net/katerynas/d3n5ksps/
.squared_content_texts_container{
width:100%;
min-height:145px;
display:flex;
flex-direction:column;
padding:10px;
position:relative;
}
.squared_content_container{
width:32%;
height:auto;
display:flex;
flex-direction:column;
margin:10px 0px;
align-self: flex-start;
}
This is my code. I want the TimeDisplay to be at the same position but the title to still be centered inside that div.
<html>
<div style="background-color:seagreen; width:100%; height:12.5%; text-align:center; display:table;">
<a style="color:aqua; font-family:Calibri; font-size:4vmax; font-weight:700; text-decoration:none; display:table-cell; vertical-align:middle;" href="Home.html">Soogbad's Website</a>
<h2 id="TimeDisplay" style="color:aqua; font-family:Calibri; font-size:1.25vmax; display:table-cell; vertical-align:middle;">00/00/0000 00:00:00</h2>
</div>
</html>
How do I do that?
try using style="position: absolute;" for the TimeDisplay
I tried several things but I am out of luck. I need to build a button containing an image and text over a button background image. Also, clicking anywhere inside the button should redirect to a page, for example, google.com. This is how the button should look like
The challenge I am having is that when the button text changes or when the screen size changes, the alignment of the image and the text gets messed up. I want to wrap the button text if it is too large. How do I wrap the button text and still align everything correctly? Also, I want the button width to be the same as I have to build multiple buttons of the same size with varied texts and images. Thank you so much. A quicker solution will be appreciated as I am anxious to see what I am doing wrong. Here is the code I have so far: JSFiddle
<a href="https://www.google.com" style="color: white !important; background-color: #7FFF00;padding: 25px;width: 50px;">
<span style="margin-bottom: 5%;">
<img src="http://placehold.it/30x30" height:100%; style="display: inline-block;" width="30" height="30" />
<span style="display: inline-block;">
<b><font size ="2" color="BLACK" face="Arial">CLICK ON THE IMAGE TO VIEW MORE DETAILS ABOUT THE ITEM </font> </b>
</span>
</span>
</a>
img{
width:30px;
height:30px;
}
a{
text-decoration:none;
color:black;}
#img{
float:left;
}
#img,#text{
display:inline;
}
#main{
margin-top:20px;
width:250px;
border:2px solid black;
border-radius:10px;
background:yellowgreen;
}
#container{
margin:15px;
}
div.clickable {
position:relative;
}
div.clickable #mainlink {
position:absolute;
width:100%;
height:100%;
}
<div class="clickable">
<a href="www.google.com" id="mainlink">
<div id="main">
<div id="container">
<div id="img">
<img src="http://oer.nios.ac.in/wiki/images/thumb/4/47/Thumpsup.png/200px-Thumpsup.png"/>
</div>
<div id="text">
<span>Click on the image to view more about the item</span>
</div>
</div>
</div>
</a>
</div>
What's the best way to add a caption below an image? The image and its caption will be floated right, and the text on the caption needs to wrap -- a 200x200px image shouldn't have a caption of width 800px.
I would strongly prefer a solution that allows me to update images (with different widths) without changing the CSS or markup.
For reasons beyond my control the image itself will also be floated right, but this should not be too problematic.
The image code is
<div class="floatright">
<img alt="foo" src="bar.png" height="490" border="0" width="800">
</div>
and I can wrap this with HTML/CSS as needed. No JS on this page.
figure {
display: table;
}
figcaption {
display: table-caption;
caption-side: bottom;
}
<figure>
<img src="https://picsum.photos/200/50" />
<figcaption>This is a caption of slightly longer length. It should wrap, regardless of the size of the image.</figcaption>
</figure>
You can substitute figure and figcaption for div and p, or whatever other containers float your semantic boat.
Shameless plug: I blogged about this problem and my solution here, if you're interested.
Something like this: http://jsfiddle.net/QLcRC/ ?
You may use also use the HTML5 figure and figcaption elements and style those as #Wasim suggested.
<figure>
<img src="/test.jpg" alt="a test-image">
<figcaption>Description</figcaption>
</figure>
Another (not-so-cross-browser-savvy) approach is to use the img title-attribute and insert it as a pseudo-element via CSS:
#content img[title]:after {
content: "[" counter(image) "] " attr(title);
counter-increment: image;
display: block;
text-align: center; }
The basic idea is to make one <div> with an <img> tag and <p> tag.
<div class="photo">
<img src="someimage.jpg">
<p>my caption
</div>
Now you simply set two styles. One for the img tag and the other for the p tag for the photo class.
Create a class name it photo:
.photo {float: right;width: 210px;margin: 0 10px 10px 10px;}
img.photo {float: right;margin-left: 10px;margin-bottom: 10px;border: 1px solid #666;
padding: 10px;}
Conclusion:
1. A div with an <img> tag and a <p> tag.
2. Div should have one class with different styles for <p> and <img> tag.
Pure HTML/CSS inline styled.
<div style="width:40%;
margin-right:6%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<!-- NEXT ONE -->
<div style="width:40%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<div style="clear:all;"></div>
<!-- NEXT ROW -->
<div style="width:40%;
margin-right:6%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="margin-top:0px;
padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<!-- NEXT ONE -->
<div style="width:40%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<div style="clear:all; height:100px;"> </div>
This is a known problem with current browsers. atlavis solution is the most simple. Until all browsers implement figure tag, then Feeela's way would work. But even then it would not be backwards compatible. I searched this issue for 3 days straight and I really hate the guys that made CSS decided to strip tables which were backwards compatible.
You could use the display: table-cell property on the class. But that is not supported by IE 6 or 7.