How can I center my image in white space?
I am using HTML, PHP or CSS. I am not sure of the best approach, but that is what I have involved so far.
I only saw how to align an image within text on w3schools.com. My other attempts, such as:
#image {
margin-left: auto;
margin-right: auto;
}
only make the image disappear.
<img> is not block level tag (its inline level tag ) . So you have two choices in css . one is Using : display:inline-block and then giving margin : 0 auto , which is used when you are adding more than one image in a line .
second is do the same about margin but this time , use display:block; ;
I wish this could help .
The standard way to horizontally center an image (or any element) in CSS is:
img {margin:0 auto;)
This is the short version of:
img (margin:0 auto 0 auto;}
which, in turn, is shorthand for:
img {margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;}
=====
If the standard method above does not work (perhaps because of conflicting CSS elsewhere in the stylesheet?), there is an alternative way to horizontally center an image (or any element) in CSS IF you know the width of the element.
Assuming the width of the <img> is 100px:
img {position:relative; left:50%; margin-left:-50px;}
It works because:
1) with margin-left:-50px; you are telling the browser to consider the left-hand margin of the element as being exactly in the middle of the 100px-width element
2) with left:50%; you are telling the browser to position the left-hand margin of the element exactly in the middle of the element's parent
And so, of course, when you place the middle of the element in the middle of the element's parent, you have succeeded in horizontally centering the element.
=====
If you are styling for contemporary browsers, you can use the Flexible Box Layout module from CSS3:
img {display:flex; justify-content:center;}
first way
set margins to 50% on both sites
#image {
margin-left: 50%;
margin-right: 50%;
}
this should center your html-object.
second way
sometimes this doesn't work for me, so i use the deprecated tag <center>.
<center>
<img src="/img.png" alt="blubb">
</center>
< div style="margin:0 auto" >
....image...
< /div >
If you want it center of the page add width:100%
Related
i'm with a trouble in relation with treatment of image, using intervention image on laravel. The problem is: I have to change aspect ratio of a image, but, in my current way, i'm cropping the image to do it, and important things in this element is being cropped too. So, i was wondering, is it possible add border around on image to create the aspect ratio? If you all would can help me, i'll would be very glad with that.
P.S. Sorry for my english, i'm still learning, haha.
Solution 1
Create a div with the right aspect ratio/dimensions and load the image as a background image with background-size: contain.
div {width: 300px; max-width: 100%;}
div > div {
width: 100%;
padding-bottom: 60%; /* use this for the aspect ratio */
background: black url('http://jekyllcodex.org/uploads/grumpycat2.jpg') center center no-repeat;
background-size: contain;
}
<div><div></div></div>
Working demo: https://codepen.io/anon/pen/ooBaKe
How it works
The padding bottom creates the height for this div (as it has no content). The padding-bottom percentage is the percentage of the width of the parent. Thus, a 2:1 ratio image has a padding-bottom of 50%. A 3:2 ratio image has a padding-bottom of 66.66%.
Why this works
The div inside this div has a width of 100%. This is 300px, as the child div is constrained by its parent. The padding bottom percentage is relative to containing block, and not (as many people think) to the body. Here the containing block is the nearest block-level ancestor, which is the parent element. Note that it would be relative to the body if we used just one div with a fixed width of 300px.
Why this solution is not perfect
This solution is fully responsive, due to the max-width of 100% on the containing div. And if you change your mind and you want images to be cropped instead of contained, you only need to change the background-size to 'cover'. Therefore this looks like a good solution. However, a background images is not a proper image, as it has no 'alt' text and lacks a DOM representation, resulting in all kinds of accessibility problems.
Solution 2
Create a div with the right aspect ratio/dimensions and load the image as img tag with max-width and max-height.
HTML
div {
width: 300px;
max-width: 100%;
position: relative;
}
div > div {
width: 100%;
padding-bottom: 110%; /* use this for the aspect ratio */
background: black;
}
div > div > img {
max-width: 100%;
max-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div>
<div>
<img src="http://jekyllcodex.org/uploads/grumpycat2.jpg" />
</div>
</div>
Working demo: https://codepen.io/anon/pen/yPgQKJ
About this solution
It works roughly in the same way as the previous one, but this solution is semantically correct. The difference here is that an image element is positioned absolute in the inner div. Its placement is absolute, but relative to its parent at 50% of the left border and 50% of the top. Then the image placement is corrected for its width and height, using the translate function of CSS (otherwise its top left corner would be in the middle of its parent). Because only max-width and max-height are used (and not width and height), the image stays responsive and keeps its aspect ratio.
A guy did a website for me and I'm trying to understand it. It's here:
http://www.brilliantzenaudio.com
Note that there's a logo image at the top left. I'm trying to understand where this came from. The relevant code seems to be partly in header.php and partly in app.css. From header.php,
<header class="banner" role="banner">
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-2">
<h1 class="logo"><?php bloginfo('name'); ?>">Brilliant Zen Audio</h1>
... stuff removed here, other items in header ...
</div>
</div>
</div>
</header>
And the app.css contains lines as follows. Looking at the php above, I see that there is a element of class "banner", so clearly there is css code addressing that (giving it a color, a position, border, and z-index). I also see that the header tag is also given the "role" of "banner". Does that serve any immediate purpose or is that for screen readers?
We can also see that the php contains h1 elements, and 'a' elements within 'h1' elements. CSS entries are there for those things. I'm not clear on what their purpose is. For one thing, the logo is an image. Why is it put in an h1 tag? I understand the need for the tag because the logo should be clickable (to get back to the home page). But what is put as the text of the link is some next (I'm not clear on how to parse the PHP there. What's clever is that the image gets put there because it's the background in an "h1.logo a" css entry.
I've added some general questions in comments below.
.banner { }
header.banner {
background:#603913;
position:relative; // question: what does this mean and how will it effect the position of things if I start moving or changing elements?
border-bottom:solid 1px #fff; // question: is this bottom border important for some reason?
z-index:9999; // what does this do?
}
h1.logo {
margin:0; // is there a need to define these on h1.logo?
padding:0;
}
h1.logo a {
display:block; // what is display:block and how does it affect appearance? How would it affect changes if I change the size or location of the logo?
text-indent:-9999px; // what is this?
background:url(../img/sm-logo.png) no-repeat 0 0;
width:101px; // what does it mean when you set the width and height of an <a>
height:103px;
margin:0 auto;
}
.banner { }
header.banner {
background:#603913;
position:relative; // This is set, so that the position:absolute of h1.logo a will work, and is also needed in order to make the z-index work.
border-bottom:solid 1px #fff; // Is responsible for the white line at the bottom of the header. It 's not important, but looks nice...
z-index:9999; // The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
}
h1.logo {
margin:0; // Yes, because normally an h1 has a top and bottom margin defined, with this setting, you set it to 0.
padding:0;
}
h1.logo a {
display:block; // Normally an a element has inline properties. By setting this to block you can use width, margin and other properties which aren't available for inline elements
text-indent:-9999px; // The text-indent property specifies the indentation of the first line in a text-block.
background:url(../img/sm-logo.png) no-repeat 0 0;
width:101px; // Sets the width of this a, because it is a block element.
height:103px;
margin:0 auto;
}
Whilst this isn't necessarily an answer as Veelen's response hit the nail perfectly on what each element does, but below is a screenshot of Google Chrome's Web inspector (Or Firebug for Firefox). Hover over any DOM Element and it'll tell you everything about it, click the CSS rules and modify anything on the fly.
Experiment with it, see how things look & feel and it's constructed. It's how most Developers test & see how changes would look without having to Code/Re upload, and whatever you touch & change during Web Inspector, aren't saved =)
Hi There is problem that i am facing in only in one post of the wordpress.The image that is inside a tag in tag is coming bigger than the actual size of the div. because of this user is not able to differentiate between to different post.please check the image
here is the link where you can check.
Link
The image is floating left so it's parent DIV ".entry-summary" needs to expand to accomodate the floating element.
To do this you need to add "overflow: hidden" to ".entry-summary".
.entry-summary {
overflow: hidden;
}
you could try:
#div img{min-width:100%;height:auto}
This will keep the aspect ratio, unless ofcourse you want to cut if off with the overflow
You can add a float: left to the content, like below:
.entry-content, .entry-summary {
margin: 1.5em 0 0 0;
text-align: justify;
width: 735px;
float: left;
}
This will cause the div to stretch around all of its contents :)
I have designed an html iframe where I want to use the word-wrap property, i.e., it should break long words onto the next line. But what happens instead is that for long words, it adds a horizontal scroll-bar rather than breaking the word onto the next line.
I tried hiding the scroll bar by using "overflow:hidden" property , but nothing happens.
I could use some help here.
Here's the html code for iframe:
<div id="main_frame" >
<iframe id="main_frame" src="homedept.php" name="iframe_a"></iframe>
</div>
The CSS is:
div#main_frame
{
float: left;
margin-top:198px;
margin-left:5px;
float:left;
position:relative;
width:100%;
height:900px;
z-index: 0;
word-wrap:break-word;
}
iframe#main_frame
{
float:left;
margin-left: 30px;
margin-right: 300px;
float:left;
border:none;
word-wrap:break-word;
width: 78%;
height:70%;
z-index: 1;
}
Thanks for the reply #tyriar, I have set the word-wrap property to the original page now. Still nothing happens.
<div id="display_posts">
<?php //php echoes some text here ?>
</div>
The CSS code is:
#display_posts
{
word-wrap:break-word;
}
You defined same ID 2 times , but ID must be unique , you can not declare it twice.
So use class instead of using ID
Also iframe call other page and you defined word-wrap in original page so its not apply.
Try
word-break:break-word
or
word-break:break-all
And try using class instead of ID because ID should be unique.
You can't apply word-wrap to an iframe, it's a completely separate page and styles from your original page won't apply. You would need to change the styles on the page where the iframe points.
Also id attributes must be unique, you have set id="main_frame" on both an iframe and a div.
Update
If word-wrap:break-all is on the iframe then maybe the width of the page is introducing the scroll bar. Make sure that your elements scale down correctly with the page. If you load up the page in your iframe in your browser you should be able to reduce the window size without a horizontal scroll bar appearing. If one does then it's an issue with the minimum width of that page.
Hello everyBody
I've created a slideShow (with left and right arrows) , displaying images in three set, images are aligned horizontally, and every image is contained in a li element with a link (headline) as follows:
<li><image src="image_n.jpg"></image>Google search engine</li>
ok my question is , how can I put the headerline ("a" tag) so it covers the bottom of the image using css.
thank you
I'd use a combination of display: block and either a negative top margin or position: relative and a negative top.
li a /* or a unique identifier if it's just this instance */
{
display: block;
margin-top: -1.1 em;
}
or
li a
{
display: block;
position: relative;
top: -1.1em;
}
I'm using em as a unit because 1em is equal to the font size. This means that margin-top: -1.1em will be (approximately) a little bit more than the height of one line of text.
Instead of using an image tag, I would suggest using the background-image CSS property on the list. That way, the text will just flow over the image naturally.
You have one of two options:
Wrap the Image tag with the anchor tag like so:
<li><image src="image_n.jpg"></image><psan class="caption">Google search engine</span></li>
Remove the image tag and define the image in the background:
<li><image src=""></image>Google search engine</li>
I prefer the latter of the two.