Here is my site, http://www.defensionem.com/schwellenpflug/
I want to shift the text from both the directions in the middle. So as the text is in the center and is easy to read and looks good. I can only add custom CSS so please advice.
Using Firebug,
I tried this:
.main-content{
padding-left:250px;
}
Which works but it isn't exactly in the middle. I tried changing the padding values and noticed it also has to do something with the sidebar side.
I'm confused.
I tried text-align:center; but it only aligns the format of the text and doesn't bring it in the middle.
try this style
.main-content {
display: block;
width: 80%; // if fixed width then replace 80% with 600px;
margin: 0 auto;
}
To align DIV in center
div {
display: block;
width: 80%; //works only if width is less than 100% or fixed like 250px
margin : 0 auto;
}
Related
I would like to know how to center horizontaly a div
(check images when we resize the screen here : http://www.500milligrammes.com/juliep/code/ )
and if it's possible to have smaller arrows and close image when screen is under 700px for example
thanks a lot
Edit the demo container css to this to align everything center.
.demo {
width: 100%;
max-width: 1024px;
margin: 0 auto;
text-align: center; /*added code*/
}
As cybersoft states, addingtext-align: center will work in this case.
As for fancy box, this answer should do the trick - https://stackoverflow.com/a/18556539/3194491
I'm trying to render a 3 column design with the following :
middle fixed width at 660px
left and right half of the remaining but with min-width : 120px
middle div should be centered on the screen
Everything I'm finding is about fixing left and right column and letting fluid the middle one, but I want the exact opposite.
I've partially achieved my goal using
display: inline-block;
vertical-align: top;
Here's the fiddle.
What's missing is the right resizing of the right and left div. When the window get resized, 660/sizeofwindow is changing, so the value in percentage of the left and of the right div are no longer correct.
Use calc to achieve this.
It is a native CSS way to do simple math right in CSS as a replacement for any length value.
Please note that calc does not work with all browsers.
Write:
#left, #right {
min-width:120px;
width:calc(50% - 330px); // half of 660px
}
As you are using display:inline-block, make sure you don't leave any space between your div's because inline-block leaves white-space between elements.
See updated fiddle here.
http://jsfiddle.net/hdt75/
.fenetre {
text-align: center;
width:1200px;
background-color: grey;
margin: 0 auto;
}
If you want table-like behavior, you should use display: table-cell in your CSS:
.fenetre {
display: table-row;
}
.section {
display: table-cell;
}
#right {
width: 50%;
}
#middle {
min-width: 660px;
max-width: 660px; // just 'width: 660px' won't be enough here
}
#left {
width: 50%;
}
http://jsfiddle.net/mblase75/zL9cn/
I'm struggling to get my 6 circles centered horizontally to the middle of the page.
I tried to put them in a .middle DIV with display: block and auto margins but no success - looks like they are aligned to the left side of .middle
http://jsfiddle.net/376wC/
Many thanks for your help
.middle {
width: 980px;
height: 600px;;
display: block;
margin-left: auto;
margin-right: auto;
background: #ccc;
}
jsFiddle Demo
This is the required change:
.middle {
width: 780px;
}
You can use inline-block, you need to adjust the size of the circle + margins so that only 3 will fit on a row. So in my example, the circle is 10px wider and taller and there are 4 extra pixels in between each circle:
http://jsfiddle.net/376wC/5/
Also, you can get rid of the circle_5px_marging class and just put equal left and right margin on the circles (see my example).
I'm having a bit of a struggle here with positioning an image inside a div.
The div is fixed to 219x197px but images are loaded with wordpress and I need to proof it so that even if the image is smaller or larger than that, it will be centered and with overflow hidden if larger and either stretched or centered if smaller (what happens when its smaller doesn't really matter).
I do not want to resize the image, I just want to show it centered and whatever fits on the div shown while the rest is hidden with overflow.
I found another question around with which I managed to center it horizontally, but I cannot do it vertically.
I tried some margin-left with percentage but it is not constant with different image sizes.
I also tried some stuff with line-height and vertical-align but nothing seems to work properly.
Does anyone know anything I could try? Thanks in advance!
Here's the HTML and CSS as it works to center horizontally:
<div class="img_article">
<span>
<?php get_post_image($post->ID,'large'); ?>
</span>
</div>
.img_article {
border-bottom: 1px solid #EF5589;
overflow: hidden;
width: 219px;
height: 197px;
text-align: center;
}
.img_article > span {
display: block;
width: 1000px;
height: 1000px;
margin-left: -390px; /* -(width-container width)/2 */
}
.img_article > span > img {
display: inline-block;
}
I don't know what you tried with line-height and vertical-align, but it should be working.
.img-hold { height: 200px; line-height: 200px; text-align: center; }
.img-hold img { verticale-align: middle; }
Demo
I'd like to have a div that is centered on the document. The div should take all the space it can to display the content and the content itself should be aligned to the left.
What I want to create is image gallery with rows and columns that are center and when you add a new thumb it will be aligned to the left.
Code:
<div id="out">
<div id="inside">
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
</div>
</div>
and the CSS:
img {
height: 110px;
width: 110px;
margin: 5px;
}
#out {
width: 100%;
}
#inside {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
background: #e2e2f2;
}
Live version here: http://jsfiddle.net/anPF2/10/
As you will notice, on right side of "#inside" there is space that I want to remove, so this block will be displayed until the last square and all of it will be centered aligned.
EDIT:
Please view this photo: https://www.dropbox.com/s/qy6trnmdks73hy5/css.jpg
It explains better what I'm trying to get.
EDIT 2:
I've uloaded another photo to show how it should adjust on lower resolution screens. notice the margins on the left and right. This is what I'm trying to get (unsuccessfully so far :\ )
https://www.dropbox.com/s/22zp0otfnp3buke/css2.jpg
EDIT 3 / ANSWER
well, thank you everybody for trying solve my problem. I solved this problem using JS, with a function that listens to a screen resize event. The functions checks the size of the right margin and add padding to the left so all the content is centered. I didn't find a solution using CSS. If you have one, I'd very much like to know it.
Thanks eveyone!
Specify a width for #inside to center it. I used width: 120px. Fiddle: http://jsfiddle.net/anPF2/7/
Additionally, CSS should be used for the height and width of images, not attributes such as height="300". The fiddle reflects this change.
use of display:inline-block takes extra margins. To remove those set font-size:0px to the #out container. See the demo
This is what you want to achieve? demo
img {
height: 110px;
width: 110px;
margin: 5px;
display: inline-block;
}
#out {
width: 100%;
margin: 0 auto;
position: relative;
border: 1px solid red;
}
#inside {
position: relative;
background: #e2e2f2;
}
You shouldn't use Pixels when laying out your css, it makes it very rigid and causes possible problems for people with high resolution screens and low resolution screens. Its best to declare it as a % or em (% is still probably slightly better when working with widths, but em for height is perfect)
First, the "outer" div must be declared to be smaller than what it is inside. For instance if "outer" is inside body:
#outer{
width: 100%;
}
#inside{
width: 80%;
margin-left: auto;
margin-right: auto;
}
#inside img{
height: 110px;
width: 110px;
margin-left: 1%;
margin-right: 1%;
margin-top: 0.5em;
float: left;
}
Okay so, since "inside" is 80% of "outer"'s width, the margin-left:auto, margin-right: auto together make the "inside" div center within the "outer".
Setting the float property to left moves all the imgs of inside to always try to move left while it can.
EDIT: I fixed this after looking at your picture you provided.
I haven't tested this but I believe it should work, let me know if you are having more problems.
To make the boxes not go the entire width of the page, try setting the width less than 100% on #out and add margin:auto; to center it.
#out {
width: 90%;
margin:auto;
}
http://jsfiddle.net/anPF2/36/