I've been reading various posts on stackoverflow and a few other sites about centering images. I found this code on various sites that seems to be a general guide:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
I am trying to center an image. I can't center it with this code. I can make it move using text-align: center but read this isn't the best method of doing so. I made a jsfiddle. If anyone wouldn't mind helping me it would be appreciated. I was able to make the image move as well by adding a random width value. I don't think this is the right approach though either since I am eyeballing if it is centered or not.
Sorry, I couldn't get the actual image to display but the img logo is there as a placeholder: jsFiddle
Your code should work just fine. There's probably something more you're not showing us. Here's a demo of two methods, though.
Basically, if the img is display: block; you can use margin: 0 auto.
If it's display: inline (the default for an img tag) the parent element would need text-align: center; on it.
Here's some code to summarize: http://jsbin.com/upuzav/1/edit
I would assign your image a class rather that trying to center all images with html. This way if you want to change where its positioned, you can quickly, rather that adjusting all things with the img tag.
CSS:
.center_image {
display: block;
margin-left: auto;
margin-right: auto }
Your Image:
<img src="your_image.jpg" class="center_image">
In order for this trick to work the image must have an explicit width. See http://designshack.net/articles/css/how-to-center-anything-with-css/
Related
I've seen a post on stack overflow kind of answering my question (How to center mat-card in angular materials?)
but the result is really not perfect (see image).
As you can see, the cards get squished, and they're on the same line. No matter the scss I add to the cards, it doesn't affect them. I'd like them to be much bigger, and one on top of the other.
I find it incredible that scss options are not simpler to move your elements where you want...
Add center class to mat-card tag and put below css.
.center {
top : 20%;
height: 40%;
width : 40%;
margin: 0 auto;
display: flex;
}
If this is not apply in scss file then put ::ng-deep just prefix of .center
I tried the answer given in the How to center mat-card in angular materials?, it works
Stackblitz
I am making a new version of the Textastic website for fun as something to put to my portfolio. I'm having an issue with getting the image to center. On the image I have the following styles:
.download {
display: block;
margin: 0 auto;
}
The image moves, but only a little bit to the right, and not in the center. Could someone take a look at the source and help me fix this problem and tell me why it's happening?
Website
Github Repo
P.S This probably will be something simple so pardon my lack of experience :)
Your last .author element has float: right; which conflicts with your image.
You can for example add a div before your image with a clear: both; it will stop .author from conflicting.
BTW, no need to set width: 100%; on block elements like div since this is their default behavior.
Floats can sometime be pains in the a**. An easier and more logical way to align your text to the right would be to set text-align: right; to .author and make them p or div.
can anyone find the solution to my problem? I've beed tweaking my CSS sheets and it doesnt seem like its changing anything. I'm using the same rules for the "4sites" image as to my "About" img.
Heres a link to the site, you can see all of my css sheets from there too.
https://dl.dropboxusercontent.com/u/146014194/483F_ss14/Pro01/hwk/pro01_content_structure_presentation_B02_responsive_4sites_FINAL.html
I know you can create everything in just one CSS sheet, but my professor asked us to make it like the way it is..
I added a div tag around the img thinking that I could control it better.. But it doesnt seem like its the case!
Mucho Thanks!
You're trying to keep the height of image as 100%. If this is a responsive design then, the width has to be 100% and height to be kept as auto
CSS:
#Mybio #Mepic img {
clear: none;
float: left;
height: auto;
width: 100%;
margin-bottom: 100px;
margin-top: 55px;
}
Now the question is, the image is taking the whole width of the screen, well, that's normal. You have to restrict the parent div(id as #Mepic) and handle it with media queries for different screen sizes. Also I saw float issues on you're site. Use Clear:both to get rid of them.
I am creating a horizontal scrolling site that will dynamically resize itself when i add the javascript to it later. However i started setting up the HTML and the code seems to cause a issue when i put another div inside of the div that makes up my dynamic code.
Also, would someone with more experience like to explain the drawbacks of using such a code if there are any?
#main_cont {
height : 500px;
white-space : nowrap;
overflow-x: scroll;
width: auto;
}
.ads {
display : inline-block;
height : 100%;
}
Is there a way for me to adjust the code below so that i can put divs and potentially images inside of it. I don't want to use a Javascript fix for this. thank you in advance.
http://jsfiddle.net/YVyFA/
You're just missing vertical-align: top; for your panels
.wlds {
vertical-align: top;
}
Updated fiddle
Also you don't need javascript to resize your layout, use a fluid layout by setting height and width in percentage values
I found a link that might be able to explain how to make a website that requires horizontal scrolling. Try this tutorial by CSS-Tricks. Hope this helped. Have a good day.
Well, the quickest and dirtiest solution to this is to give the #main-cont div a specific width and make the .wlds divs floated. So add the following CSS rules:
#main-cont {
width: 783px;
}
.wlds {
float: left;
}
JSFiddle.
I have designed a layout and i find some gaps in the stacking of divs over each other.
can some one help me http://uniquedl.com/3closets/about.html
and
You need this in style.css:
img { display: block }
and you need to change the height on .introduction .intro-message to 384px, to match the height of the image on the left.
Doing this solves both problems.
As an alternative to img { display: block }, you could instead do: img { vertical-align:bottom }. This also fixes.
See this answer for a good explanation of what's going on here.
#Alohci explains it very nicely.
You have a <div class="clear"></div> in both instances there. I would say that the page is behaving as expected.
Edit: If you use Google Chrome to view this page, you can right click on an area and choose "inspect element". It will provide a window that will display the code as it's rendered by the browser, and on the right there will be another properties window that displays the css being assigned to the elements you're looking at.
in their div .introduction you have an image larger than the div itself, this must be the problem, including the other divs
First gap: your class .introduction is having height of 384px where else class .intro-message (which is a child of .introduction) is having a height of 390px.
Hi for your website :http://uniquedl.com/3closets/about.html just make the style like
.introduction {
height: 384px;
overflow: hidden;
position: relative;
}
Then it will work