I'm trying to center my image inside the div, but its seemingly glued to the right.
Here are my divs:
<div align="left" style="display:inline-block;">
<div style="width:210px;">
<img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
</div>
</div>
This is what it looks like:
How can I fix this?
img tags are inline by default so all you have to do is call text-align: center on its parent:
<div style="display:inline-block;">
<div style="width:210px;text-align: center;">
<img src="res/img/TopAd.png" style="padding:10px 0;">
</div>
</div>
A few other notes:
You can remove align="left", that's not supported in HTML5.
You can also remove top: -100px because the top, left, right, and bottom properties don't work unless an element is set to fixed, absolute or relative.
This line: padding: 10 0 10 0; is missing px added to it and can be condensed to padding: 10px 0; which is top and bottom.
UPDATE
if you want to just center all of this in the middle of the page you can add text-align: center to the body but I would suggest removing the first div and adding margin:auto to the second one which has a defined width:
<div style="width:210px;text-align: center; margin: auto;">
<img src="http://www.placecage.com/200/400" style="padding:10px 0;"/>
</div>
FIDDLE
<div align="left" style="display:inline-block;">
<div style="width:210px; vertical-align:middle; text-align:center">
<img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
</div>
</div>
The following code will do the task.
<div align="left" style="display:inline-block;">
<div style="width:210px;" align="center">
<img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
</div>
<div align="left"
The align attribute was deprecated in HTML4. Use style="text-align: left;" instead of align="left".
padding:10 0 10 0;
10 of what? You are missing the units. You probably want 10px for pixels:
padding:10px 0 10px 0;
I don't see any code in there that even looks like it's trying to center the image. Try text-align: center on the container that the image should be centered within.
<div style="display:inline-block;">
<div style="width:210px; text-align: center; border: 1px solid #ccc;">
<img src="http://placecage.com/160/160" style="padding: 10px 0 10px 0;" />
</div>
</div>
Related
New to writing code and need help stacking images on top of one another.
I am trying to stack an image on top of another (that I wish to have as my background) with a right align.
<div class="container-fluid" id="special">
<section id="fourth">
<img src="website/img-services.jpg" alt="Greenteriors Moss Art" width="40%" height="40%" align="right" id="services">
<img src="website/bg-services.jpg" alt="Greenteriors Moss Art" size="cover" width="100%" height="100%" id="services-background">
</section>
</div>
I lack the CSS prowess to even attempt to write the code. What currently happens is the img-services stacks on top of bg-services with a right align. I need the first image stacked on top of the second.
Appreciate any help.
here's a jsfiddle for an identical project with more images: http://jsfiddle.net/kizu/4RPFa/4570/
jsfiddle is a great free tool to play around with code and see how changes work out
so you'd be using an inline-block helper and setting height to: 100% and vertical-align: middle on both elements.
<div class="container-fluid" id="special">
<section id="fourth">
<div class=frame>
<span class="helper"></span> <img src="website/img-services.jpg"
alt="Greenteriors Moss Art" width="40%" height="40%" align="right"
id="services">
</div>
<div class=frame>
<span class="helper"></span> <img src="website/img-services.jpg"
alt="Greenteriors Moss Art" width="40%" height="40%" align="right"
id="services">
</div>
</section>
</div>
i've added extra div's around your elements. now you just need to add this to the css file to tell it what to do with those new divs:
.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
white-space: nowrap; /* this is required unless you put the helper span closely near the img */
text-align: center; margin: 1em 0;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
you'll want to play around to make it look how you want. change the height and width. prob remove the border
#fourth { background-image: url('website/bg-services.jpg'); background-size: cover; }
<div class="container-fluid" id="special">
<section id="fourth">
<img src="website/img-services.jpg" alt="Greenteriors Moss Art" width="40%" height="40%" align="right" id="services">
</section>
</div>
I'm creating a responsive email... and tested it out on mail chimp and it was fine all throughout. but when tested on exact target (the email client needed to send out this email)
the image I need to center near bottom of email... WILL not center. see code:
<div class="layout one-col fixed-width" style=
"Margin: 0 auto;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% -167400px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style=
"border-collapse: collapse;display: table;width: 100%;background-color: #f8f6f6;"
margin-left:="" emb-background-style="">
<!--[if (mso)|(IE)]><table align="center" cellpadding="0" cellspacing="0" role="presentation"><tr class="layout-fixed-width" emb-background-style><td style="width: 600px" class="w560"><![endif]-->
<div class="column" style=
"text-align: center; position: absolute !important; color: #8e8e8e;font-size: 14px;line-height: 21px;font-family: Cabin,Avenir,sans-serif;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% -167400px);">
<div style=
"Margin-left: 20px;Margin-right: 20px;Margin-bottom: 15px;font-size: 12px;font-style: normal;font-weight: normal;"
align="center">
<a href="url"
target="_blank"></a>
<center>
<img style=
"Margin-top: 10px; Margin-left: 20px;Margin-right: 20px;Margin-bottom: 15px;border: 0;display: block; text-align: center; position: absolute !important;height: auto;width: 100%;max-width: 257px;"
alt="Partnerships" src="image7_1112017.png" />
</center>
</div>
</div><!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
</body>
Everything else seems to be fine... but this is the only image that needs to be centered. fyi i got got the template from campaign monitor and modified accordingly. image was not centered in template.
Setting the width of a block-level element will stop it from filling the width of its container. Taking advantage of this you can set the margin to automatically split the remaining space evenly on the left and right side.
<div style="width: 200px; margin: auto;">
<img alt="Partnerships" src="image7_1112017.png" style="width: 100%;" />
</div>
Here we set the image container width to 200px and the image to 100% so it will scale to the width given. So even if an image is 500px wide, it will be centered and scaled down to 200px because that is the defined size of the container. If you know the width of your image, assign that to the container then setting the image element width becomes unnecessary.
EDIT
You may want to consider reformatting the body of your html. You will want to remove display:table; from the container with the layout__inner class.
<body>
<div class="layout one-col fixed-width" style="max-width: 600px;min-width: 320px;">
<div class="layout__inner" style="background-color: #f8f6f6;">
<!-- Content Body -->
<div style="margin-bottom:15px;">
Here is some example content. This is where you want your main content to be.
</div>
<!-- /Content Body -->
<div style="width:200px;margin:auto;">
<img alt="Partnerships" src="image7_1112017.png" style="width: 100%;" />
</div>
</div>
</div>
</body>
Here is a working example: JSFiddle
All you need is a one column one row table (maybe). You have a lot of divs in your code, way too many. And also a lot of CSS that won't work in an email. Keep the CSS simple, use tables to center things. Use a lot of nested tables rather than one table with many rows and columns. Try this in your DIV. It may work, but you may have to rework the rest of your code too.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<img
alt="Partnerships" src="image7_1112017.png" style="margin-top: 10px; margin-left: 20px;margin-right: 20px;margin-bottom: 15px;border: 0;" /></td>
</tr>
</tbody>
</table>
Let's say i have,
<div style="padding: 15px; width: 100%;">
<div style="margin: -15px;; width: 100%;">
<img src="http://imageshack.us/scaled/landing/51/tigerso.jpg" alt="" style="width: 100%;">
</div>
</div>
The parent div contains 15px padding and - child div wanted to remove this padding by using margin but it does not work. See this fiddle. It's showing me a horizontal scrollbar always.
http://jsfiddle.net/2GJnG/
Remove the width properties of the two div elements:
<div style="padding: 15px;">
<div style="margin: -15px;">
<img src="http://imageshack.us/scaled/landing/51/tigerso.jpg" alt="" style="width: 100%;">
</div>
</div>
See a demo here > http://jsfiddle.net/2GJnG/5/
I'll preface this question by stating I have historically used tables for my HTML formatting and am fairly good at getting it to look the way I'd like... I am aware that tables are meant for "tabular data" and not formatting. I always get a bit frustrated when I try to do it the "right way", so today I am seeking some help.
<div style="width: 90%;">
<div style="width: 50%; height: 75px; vertical-align: middle; float: left;">
<a href="a.html" style="margin: auto 0px auto 0px">
<img src="../../images/red_arrow_50.png" alt="a" width="50" height="50" style="border-width: 0px;" />
</a>
A Link
</div>
<div style="width: 50%; float: right;">
B Link
</div>
</div>
As you can see from my attempts above, I'd like for the image link and the 2 text links to all line up along the same horizontal line (i.e. text links at the center of the image). Depending on how wide the parent div is I'd like the A img/link and B link a reasonable distance from one another. I'd also like for the divs with the "float: left" and "float: right" styles to not extend south beyond the border of the parent div (for some reason it is doing that to me in firefox with the above code).
Please help set me straight? Am I the only one who finds "the right way" of formatting things to be a big pain in the rear? I'm hoping I'm missing something big that if corrected will get me going down the right path.
===============
Update, thanks for the comments, I went to jsfiddle and fiddled a table-based solution:
<table style="width: 90%; margin: 0px auto 0px auto;">
<tr>
<td style="width: 50%;"><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="A" width="50" height="50" style="border-width: 0px; vertical-align: middle;" /><a href="a.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >A-Link</a></td>
<td style=""><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="B" width="50" height="50" style="border-width: 0px; vertical-align:middle;" /><a href="b.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >B-Link</a></td>
</tr>
</table>
Yields the desired layout:
I think it must be my misunderstanding/usage of floats and positions that always stings me when I try div-based layouts.
Personally I'd do it like this - http://jsfiddle.net/spacebeers/nWNPm/7/
.magLink {
list-style: none;
height: 50px;
float: left;
margin: 0 50px 0 0;
}
.magLink li {
float: left;
height: 50px;
display: table;
}
.magLink li a {
height: 50px;
display: table-cell;
vertical-align: middle;
}
<ul class="magLink">
<li><img src="http://www.whg.uk.com/Image/Magnifying_glass_1.gif" width="50" height="50" /></li>
<li>Link A</li>
</ul>
You can just copy the <ul> to have more than one. Just adjust the right margin to space them out how ever you want. I've set up examples of single link, multiple links and links with extra styling for in in the JSFIddle.
EDIT:
JSFiddle's running pretty badly so here's an image of the output in case it's not working.
Vertical alignment can be a real pain in CSS but tables for layout have had their day man. Let them live out their days being used for tabular data in peace.
From what I can tell, your "floaters" are extending beyond the parent div because you have two 50% widths inside of a 90%. Try setting them both to 45%. Then set a class or an id on your two floater containers, set them to position:relative, set both your link and img within each floating div to position:absolute, and use left, right, top, and bottom to move them into place (the img and link will be confined to the relatively positioned parent div). Does this help?
Edit
<div style="width: 90%;">
<div style="width: 50%; height: 75px; vertical-align: middle; float: left; position:relative;">
<a href="a.html" style="margin: auto 0px auto 0px;">
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="a" width="50" height="50" style="border- width: 0px;" />
</a>
A Link
</div>
<div style="width: 50%; float: right; height:75px; vertical-align: middle; position:relative;">
B Link
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="b" width="50" height="50" style="border-width: 0px;" />
</div>
</div>
That is the code equivalent to your table layout.
I would have used jsfiddle but I got a 504 error... probably didn't hold my mouth right. :)
http://www.kidsmartnyc.com/index.html
I tried a few things after I removed the image from the secondary pages but now I can't get the centering back.
With the power of CSS!
<img src="images/art.jpg" alt="" style="display: block; margin: 0 auto;">
Please create individual div for image give a style that text-align:center and width:100%;
<div class="main">
<div style="text-align:center; width:100%;">
<img alt="" src="images/art.jpg" style="margin: 0pt auto;"/>
</div>
---- /*someother Statements*/
----
----
</div>