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
Related
No matter what I try, I cannot manage to find the proper CSS for the behaviour below:
A: Larger-than-window images show the upper left of the image and allow scrolling to see the rest of it.
(Important: the parent's DIV background is covered, but should be visible on images with transparency — even if you scroll.)
B: Smaller-than-window images are horizontally and vertically centered, the parent DIV covers the whole window.
Thanks for any help!
In order to center the smaller image inside the parent div, you can use display:flex for the parent div. Then set the justify-content and align-items to center. Here is a workaround,
#mydiv {
overflow: auto;
max-width: 500px;
max-height:500px;
}
.mainContainer{
width:500px;
height:500px;
background-color:#000;
display: flex;
justify-content: center;
align-items: center;
background-size:cover;
}
Replace the small image with this to check how it works with a large image.
<div class="mainContainer">
<div id='mydiv'>
<img src='https://i1.wp.com/www.rceshop.com/wp-content/uploads/2016/12/samples.png?fit=480%2C400' />
</div>
</div>
PS: Change the width and height of the parent div to the required screen size of yours. Hope this will help!
The line-height property turned out to be the base for solving the problem. Not sure if this is a hack, but it works.
.mainContainer {
text-align: center;
}
#mydiv {
line-height: 100vH;
margin: 0;
}
img {
vertical-align: middle;
}
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;
}
I'm trying to Vertical centering picture on my page
i tried few scripts & styles but none of them worked
my page is:
TEST.esc.bugs3.com
I'm trying to Center the "Arrow" pic on the left & right sides to the center of the main pic
today all i get is the pic is always on the "TOP" of the DIV & i wish to put in in center
Note: I don't wanna use fix size as PX i wish to make it with 50%
like main pic is the 100% height and the arrow will be show on 50% of it
Layout - how i wish it will look like
thanks for the help :)
Edit:
thanks for the answers
but i need the side div (side box) to be Vertical centered to the main div (center box)
the main pic size is not fixed (every media will have different size - so i cant use PX as position
Use CSS3 Flexbox for modern Browsers: Here's Browser support for it.
.center-both{
display: flex;
justify-content: center;
align-items: center;
height: 350px;
background: LightSeaGreen;
}
Fiddle
Read this article for more on flexbox: http://dipaksblogonline.blogspot.in/2014/05/css-flexbox-explained-with-examples.html
If you want to support old browsers like IE7/IE8 then use display: table-cell; property to place the content vertically center.
Change the css for Sidepanel class as below
.SidePanel {
width: 5%;
height: auto;
float: left;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
Use This Code For Your Pic:
.pic{
position: absolute;
top: 50%;
margin-top: -(HEIGHT/2)
}
Which HEIGHT is Your Picture's height in Pixels.
Update 1
Your Container Should Have A Specific Height And Have A CSS Property: Position: (Relative|Absolute|Fixed)
I am finding some HTML\CSS difficulties with this web page: http://www.saranistri.com/saranistriWPnew/?page_id=613
As you can see in this page there is an immage named: abusivismo1-641x321.jpg
This immage is into this div containers structure:
The div having clasas vc_span12 wpb_column column_container contains this other div having class wpb_wrapper that contains itself wpb_single_image wpb_content_element centerizedImg that contains the div having class wpb_wrapper that finnally contains my abusivismo1-641x321.jpg
I want to center this immage in its container in such a way that is at the center of the page
I have try to set some CSS settings like:
width: 642px;
margin: 0 auto;
but not work
Can you help me?
Tnx so much
Andrea
Here is the solution.
.wpb_content_element.wpb_single_image img {
display: table;
height: auto;
margin: 0 auto;
max-width: 100%;
}
Replace the above values in your class .wpb_content_element.wpb_single_image img and your image will be at the center.
Hope this helps.
Just add this style to that class :
.wpb_single_image.wpb_content_element.centerizedImg {
text-align:center
}
if you want sure to get only the images centered, style your wrapper of the images with display:inline-block;
just a simple solution without margins.
in order to centralize any element, you may use
margin-left: auto;
margin-right: auto;
also, an element will stay at center if it's patent has a text-align: center
You may also have a look at Dead Centre
Just use text-align:center; for your wpb_wrapper class. Have a look at this fiddle
Use margin-left:auto; and margin-right:auto; it will horizontally align to center.
In some cases, depending for what you use this, the image is not resized automatically when you resize the browser; i.e. mobile browsers. I came up with this:
.wpb_wrapper {
display:inline-block;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
padding: 0px 15px 0px 15px; /* adds some white space in left/right on mobile */
}
Hope it helps someone.
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