Im trying to position the 3 phone icons to the bottom right. Underneath the bottom right image.
Fiddle Here
Just when I think I have it by using for example margin-left xxpx, etc the images move over but then go vertically aligned. What is best practice for positioning something anywhere you want it?
.imgs {
display:inline;
margin: 0px auto;
margin-left: 1002px;
}
use
.images {
float:right;
}
or
.imgs {
float:right;
display:inline-block;
}
in second case you can give spacing between two images also. margin-left:10px;
.images > div {
display: inline-block;
float:right
}
Related
my website is watersedgeofshelton.com and on the "floor plans" page I have two images side by side that use the code float:left
my problem is that I can not get them centered on the page and also still be side by side
thank you!
div#floorplans {
text-align: center;
}
div#admiral {
float: left;
padding-right: 20px;
}
div#clipper {
float: left;
}
Add below code to your CSS and check your page -
div#admiral,
div#clipper {
width: 50%;
}
and remove this one -
div#admiral {
padding-right: 20px;
}
First remove float from each div#admiral and div#clipper and then goto div#floorplans and add the following
div#floorplans {
text-align: center;
display: flex;
margin-left: 70px;
}
Hope this helps you.
1) Remove Float
2) use table or ul li (with horizontal nav and hiding bullets) for images to show side by side.
3) use "align-text:center"; if you want div the use "margin:0 auto"
Hope it help :-)
Why not try something like this?
Put the floating divs/images inside a wrapper set a width for the wrapper and set a margin auto for the wrapper!
Everything was going great until I attempted to text-align:center; my divs. Apparently divs that are floated left ignore text-align but the floated div needs to be that way to have two of the smaller divs on the same line as it.
It's hard to explain but here is an example of the code to describe it better:
https://jsfiddle.net/8fu5b9td/3/
.featured-series {
width:606px;
height:406px;
display:inline-block;
float:left;
margin:3px 3px 3px 3px;
background-color:black;
}
All I want to know is how to make the featured-series div act like the standard-series divs and centre itself at the same time. Thanks!
Remove the float:left; and add margin:0 auto; to it.
.featured-series {
width:606px;
height:406px;
display:inline-block;
margin:0 auto;
background-color:black;
}
Try this https://jsfiddle.net/8fu5b9td/7/
CSS
#media(max-width: 930px) {
.featured-series {
margin: 0 auto;
float: none;
}
}
#media(max-width: 610px) {
.featured-series {
background-color: black;
display: block;
height: 200px;
margin: 0 auto;
vertical-align: top;
width: 300px;
float: none;
}
}
I ended up fudging it with a little bit of JS. I know it's naughty but it does the job and it's fairly cheap on resources.
function centerContent(){
$('.center-content').width( Math.floor($('.body').width()/306)*306 );
}
setInterval( centerContent, 250);
.center-content has margin:0 auto; and it is the container for all of the series divs. I found that because I couldn't set the width, I really couldn't do much so I have JS set the width to the best possible fit depending on the screen size.
Not the cleanest solution and I'd much prefer pure JS but if it works, it works.
Edit: The .body class is an div which loads ajax inside of it, when it changes size it's basically like the changing size on a normal page.
I'm trying to get my images to align horizontally but I seem to be doing something wrong but I have no clue what the problem is.
Here's the JSFiddle: http://jsfiddle.net/ByDAA/4/
Here's the CSS:
.imgcontainer img {
display:inline-block;
position:relative;
padding:1px;
border: 1px solid #c4c4c4;
margin:0px 37px 0px 0px;
width:175px;
height:175px;
}
You should wrap each img and p with a div and use float:left. Example: fiddle
You're seeing line breaks because you explicitly put them there with <br> elements.
To achieve the intended effect, put the images and their subtexts in a separate container (div or article) and apply the display:inline-block style to that element.
try :
float: left;
and change your css - remove unneded properties
Might this be what you are after? http://jsfiddle.net/taneleero/ByDAA/7/
Assuming that you would like the "Let Us Sell It" to align with each image I added containers around each image + the text and set them to inline-blocks. For the container I assigned text-align:center so the inline-blocks would align to the center. Also I changed to images do display:block to force the text below the image.
.container {
position: absolute;
margin: auto;
width: 100%;
text-align:center;
}
.imgcontainer img {
display:block;
position:relative;
padding:1px;
border: 1px solid #c4c4c4;
width:175px;
height:175px;
}
span {
display:inline-block;
margin:0px 37px 0px 0px;
}
You need to wrap each image and text element in a specific element (a div or figure).
A figure is probably best as it allows the use of the figcaption element inside it for the text.
Each figure is set as display:inline-block and vertical-align: top and the container is set to text-align:center
Codepen Example
I was wondering how I could achieve this effect. Firstly content currently is in a div called 'contentDiv'. I have all the following content float:right of the div. What I want to achieve is an imaginary border (look at image) in which the content cannot cross.
Then I want the content to be centered.
How would I achieve this with CSS? Or what elements could I use to replicate this effect.
I have looked into centering the content and this code works for me -
margin-left: auto;
margin-right: auto;
#contentDivParent {
/*It will define the imaginary border*/
padding-left:30%;
width:70%;
}
#contentDiv {
/*remove the float*/
float:none;
/*center*/
margin:0px auto;
/*force line-break*/
max-width:100%;
}
first off I would like to say thanks to those who have helped me out before on here.
Ok the problem is this: I have several images which are placed inside a a div called "Banner"
at the top of my web site. I also have a text link to facebook which is floated to the right. They are each centered using the following css...
#banner img {border:none;
margin:0 auto;
display:block;
}
a#social_network {
float:right;
margin:10px;
padding:0px;
}
I have also floated a link to facebook to the right, which is given an id called "social_network" and is also within the banner div. The problem is that when I float this textual link right my top image is no longer centered. I thought that maybe I needed to clear the float but that did not work I was doing it wrong.
All suggestions are appreciated.
Maybe you can try this:
#banner {
position: relative:
}
#banner img {
border: none;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px; /* <--- Here's 1/2 of the width of the image */
margin-top: -50px; /* <--- Here's 1/2 of the height of the image */
}