I administrative a site where there is a logo which is left aligned.
The HTML and CSS for that logo is looking like this:
HTML
<div class="logo-container">
<a href="#homePage.Url">
<img src="/img/logo-white.svg" data-svg-fallback="/img/logo-white.png" alt="#logoAltText" class="img-responsive logo"/>
</a>
</div>
CSS
#mixin img-responsive($display: block) {
display: $display;
max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}
I have to make a Landingpage where the logo is centered. Therefore I thought on my landingpage I could do like so:
HTML
<div class="logo-container">
<a href="#homePage.Url">
<img src="/img/logo-white.svg" data-svg-fallback="/img/logo-white.png" alt="#logoAltText" class="landingpage img-responsive logo"/>
</a>
</div>
CSS
.landingpage img-responsive logo {
margin: 0 auto;
}
is that incorrect?
To select a multi-class event, remove the spaces between the class selectors:
.landingpage.img-responsive.logo {
margin: 0 auto;
}
margin: 0 auto; is a good way to center a block-level element that is smaller than it's container element. However depending on your markup you may want to use text-align: center; on the parent.
img-responsive is a class, therefore you must use it with a . . .img-responsive and .logo and .landingpage are in the same class so you should remove space like this :
.landingpage.img-responsive.logo{
margin: 0 auto;
}
See the element element selector and the And selector
Related
I have six of my portfolio images (of kittens). How do I stack six of them on top of the lake wallpaper? I don't want there to be any white space, just the word "Portfolio" and six kittens on top of the lake, followed by the grey background section of the website.
Portfolio - How do I make six kitten photos on top of the lake img?
About - Grey background with white font and profile pic (Already done)
Contact - Contact form (Already done)
I've read about z-index, and tried background-size: cover and contain, but it doesn't seem to work... Can anyone explain all this to me?
HTML
<header id="portfolio" class="container-fluid">
<div class="container">
<h1 class="font-italic">Portfolio</h1>
<div class="row">
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio1" class="img-thumbnail">
</div>
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio2" class="img-thumbnail>
</div>
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio3" class="img-thumbnail">
</div>
</div>
<div class="row portfolio-buffer">
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio4" class="img-thumbnail">
</div>
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio5" class="img-thumbnail">
</div>
<div class="col-md-4">
<img src="http://placekitten.com/350/300" alt="Porfolio6" class="img-thumbnail">
</div>
</div>
</div>
</header>
CSS
.portfolio-buffer {
margin-top: 30px;
}
section {
padding: 85px 0;
}
footer {
padding: 40px 0;
}
#portfolio > img {
margin-left: -15px; /* Compensate for the container */
width: calc(100% + 30px); /* Compensate for the container */
}
https://codepen.io/jenlky/pen/GMENBL/
You have numerous problems with your fiddle:
Your .wallpaper selector doesn't actually have a matching element; you have no element with a class of wallpaper.
You are using Boostrap's container-fluid, but not using a column-based layout. Your elements in this container that are not in Bootstrap rows (such as this background) need to have margin-left and margin-right of -15px to accommodate for Boostrap.
You have rows that have combined columns counts other than 12.
Most elements overflow their container.
As for the background not working with background-size, that is because background-size requires a background to operate, added via a CSS property like background: url(background.jpg). You are simply using an <img> tag.
Having said that, all you need to do is make sure that your image has a max-width of 100%, to ensure that it stays within the bounds. You'll probably also want to make it fixed to the page, which can be done with position: fixed.
I've created a new selector based on your current structure, and added the relevant properties:
#portfolio > img {
margin-left: -15px; /* Compensate for the container */
margin-right: -15px; /* Compensate for the container */
max-width: 100%;
position: fixed; /* Optional */
}
This can be seen working here.
Note that you'll probably want to add max-width: 100%; and max-height: 100%; to all images, to ensure that they don't go outside of their container.
Update
In order to have the background only cover the portfolio section, you'll want to remove position: fixed (to give it the default position relative). You'll still want to keep the negative left margin, but you'll want to make it 100% of the width of the container plus 30 pixels in order to compensate for the padding and offset. That can be done with a CSS calculation:
#portfolio > img {
margin-left: -15px; /* Compensate for the container */
width: calc(100% + 30px); /* Compensate for the container */
}
I've created a new pen showcasing this here.
And again, note that you'll probably want to set a max-width of 100% on all images, and you should set margin-left (and technically margin-right) on all elements that are directly under a Bootstrap column. For example, the cats can be fixed with:
.col-md-4 > img.img-absolute {
margin-left: -15px;
margin-right: -15px;
max-width: 100%;
}
Hope this helps! :)
Ok thanks to Obsidian Age for giving me the idea of using background-image instead of img src="...". So I removed img src and added this in:
header {
background-image: url("https://wallpaperscraft.com/image/forest_lake_reflection_island_mist_97668_1920x1080.jpg");
padding: 85px 0;
background-repeat: no-repeat;
}
That works and solved the problem I had. I've updated in my codepen (https://codepen.io/jenlky/pen/GMENBL/). Cheers!
So I understand how to center images when there is only one
using the css code block and margin but when I do that the images become on top of each other. I can hardcode the margins by doing margin-left: 30px but I also want to consider different screen size will change how the image is positioned. I would want to center it for all screens.
#image {
block:
margin:
}
jsfiddle
A simple approach might be to wrap your a and img elements in a wrapper div and apply the following CSS:
.wrap {
border: 1px dotted blue;
display: table;
white-space: nowrap;
margin: 0 auto;
}
Your HTML would look like:
<div class="wrap">
<a href="http://www.commnexus.org/evonexus-companies/hush-technology/">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/evobadge.png" height="75" width="75" id="evonexus" class="evonexus">
</a>
<a href="http://www.sdvg.org/thecool2014/" style="margin-left: 20px;">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/cool-companies-2014.png" height="75" width="75" id="coolcompany" class="coolcompany">
</a>
</div>
You can control the spacing between a elements by adding a left margin to the second a (or a right margin to the first).
See demo: http://jsfiddle.net/v9LBZ/
How This Works
What is needed here is a block level container that can shrink-to-fit the width of the two logos, and display: table will do that. You can then apply margin: 0 auto to center the CSS table.
However, to prevent the CSS table from wrapping the two a elements into a single narrow column (trying to get the smallest width), you need to add white-space: nowrap to keep all the inline a elements on a single line.
You could leave them inline elements and wrap them in a container element with text-align: center applied. See this fiddle.
You could wrap your image in div then use float css property to achieve this :
http://jsfiddle.net/b7TQs/1/
.left, .right{
width: 50%;
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
I'm currently stuck, as I'm trying to center an image in the page. Here is what I have
HTML
<div class="bg-container">
<img alt="Background" class="random bgimg">
</div>
CSS
.bgimg{
max-height: 640px;
width: 1920px;
clip: auto;
}
.bg-container{
overflow-x: hidden;
}
Note: There is no src attribute in the img tag as I use the random class to pull a random image via JavaScript.
I've tried applying center-block and text-center to both the div and image classes to no avail. Here is an example of the actual page. http://shepherdjerred.com/demo/front/
I appreciate any help given.
You do not add px unit in width attribute of an image element.
To center the image,add this to your selector
.bgimg {
display: block;
margin: auto;
}
I have a div and I want to add a logo in its middle. If I write:
<div id="header">
<img id="logo" src="img/logo.png" title="Logo" />
</div>
#logo {
margin: 0 auto 0 auto;
width: 278px;
}
Nothing happens.
But if I make a special div for the image, like this:
<div id="header">
<div id = "logo">
<img src="img/logo.png" title="Logo" />
</div>
</div>
#logo {
margin: 0 auto 0 auto;
width: 278px;
}
It works, and the image is centered. Why?
Images are inline by default, so they won't respect that margin: auto off the bat. What you can do (without the extra div) is give text-align: center to the #header.
The reason the auxiliary div works is because you are wrapping the image in a div with the same dimensions, and being a block element, the div will respect margin auto and center itself.
this post may give you some help
It explains to you why you need wrap a div and how to do it without a div wrapper(but may have browser compatible issue)
Before you attempt to solve this please carefully read the constraints I'm dealing with.
Constraints
.pictureContainer needs to remain position: relative (because I have a hover menu that positions absolutely relative to it.)
The image could be smaller than 80% of #slide in which case it still must align in the center. What this translates to? You can't simply do a margin: 0 10% because yes that would center this specific case, but it will not satisfy the case where the image is smaller than 80% of the width of #slide
Hello, I am inline-block element that is positioned beside another inline block element, isn't that wonderful? I think that is wonderful!
Why not simply add:
text-align: center;
to pictureContainer css declaration. It will center any image in it.
firts try to wrap your div class="pictureContainer" and give css to the wrapper
html
<div class="wrapper">
<div class="pictureContainer">
<img id="currentPic" class="slideShowPic" src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg" width="350" alt="IMAGE" />
<div class="hoverMenu">
<a class="nextSlide" href="#">
>
</a>
<a class="prevSlide" href="#">
<
</a>
</div>
</div>
</div>
css
.pictureContainer {
width: 350px;
position: relative;
background: red;
padding: 0;
margin: 0;
}
#currentPic {
vertical-align: top;
}
.wrapper {
margin:auto;
width: 350px;
}
working demohope this help
Like the answer from #jhunlio suggests:
create a wrapper around it with the follwong css
.wrapper {
margin:auto;
width: 600px;
}
The trick here is that the width is fixed and the margin is set to auto.
It means that the margin (outer space) will be equally distributed at the sides of the wrapper with the fixed width. Hence it is in the middle.