I'm using Bootstrap and WordPress.
I've been researching how to horizontally and vertically align an image inside a div (classic problem, apparently). I used the answer to this question to vertically align my image: How to vertically align an image inside div
Now I need to horizontally align it. I know to do that, you normally add margin: 0 auto;
The problem is that the method that I followed uses margin:auto; and it undos the vertical align if I change it to margin:0 auto;
I started to make a JSFiddle of the problem, but I couldn't replicate it. So I think it's something in Bootstrap that is overriding it, but I'm not sure what.
Here is the basic code I'm using from the vertical align solution on the other stackoverflow question:
HTML
<div class="crop-featured-2">
<img src="image.png">
</div>
CSS
.container {
position: relative;
width: 100%;
overflow: hidden;
}
.crop-featured-2 {
height: 100px;
width: 200px;
position: relative;
border: 1px solid red;
padding: 5px;
display:block;
}
.crop-featured-2 img {
min-height: 100px;
width:100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border:0px;
padding:0;
}
You can see the problem at http://ucaftercruz.com/upcoming/?page_id=30. It's the slider at the top and the problem is in the .carousel-inner div. Resize the browser to around 800px wide to be able to really see the issue.
Thanks so much in advance!
I had a look at your web page. I think the issue solves it self if you just remove the width rule from this selector:
.crop-featured-2 {
height: 320px;
width: 575px;
position: relative;
}
instead use
.crop-featured-2 {
height: 320px;
position: relative;
}
Try this
.crop-featured-2 {
position: relative;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
Related
This is an odd one. I have a fixed nav bar to the top of the page with
.headerbar {
width: 100%;
position: fixed;
z-index: 110;
top: 0;
left: 0;
background:#FFF;
}
I also have a html5 video on the page acting as a background video for a div its css is the following
video {
display: inline-block;
vertical-align: baseline;
position: absolute;
bottom: 0;
right: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
overflow: hidden;
}
The issue is that when I scroll the page my fixed header moves about 15px and then wont move, but If I give the video a positive z-index everything works fine although the video is not a background then.
This is very strange I have never come across this, any ideas ? anyone ?
I am trying to make a div inside another one exactly in the middle. Is there any better way to do that?
body, html
{
margin:0;
height:100%;
}
#master_wrapper
{
width:100px;
height:100px;
background:#57a957;
}
#header
{
left:50%;
width:50%;
height:50%;
background:red;
}
<div id="master_wrapper">
<div id="header">
Header
</div>
http://jsfiddle.net/uba1wr52/
You can make the inner div exactly in the middle by adding style "margin: 0px auto" to the #header in the css file.
Just so you know, a lot of your css is pointless/redundant since you've not set your positioning of your classes. I.e. to use top:... left:... right:... and/or bottom:... you need to have set your positioning to absolute;
The snippet below allows you to horizontally and/or vertically center your div element:
html,
body {
padding: 0;
margin: 0;
}
#master_wrapper {
width: 100px;
height: 100px;
background: #57a957;
position: relative;
}
#header {
position: absolute;
width: 50%;
height: 50%;
background: red;
margin:0 auto; /*horizontally center*/
left:0;
right:0;
-webkit-transform: translateY(50%); /*vertically center*/
-ms-transform: translateY(50%);
transform: translateY(50%);
}
<div id="master_wrapper">
<div id="header">
Header
</div>
An example how to place a HTML Element in the middle horizontal and vertical
<!DOCTYPE html>
<html>
<head>
<title>Div in middle</title>
</head>
<body>
<div style="
background: red;
width : 300px;
height : 100px;
">
<div style="
background : #fff;
width : 123px;
height : 67px;
margin : 0 auto;
position: relative;
top : 50%;
transform : translateY(-50%);
">
Div in middle of other div
</div>
</div>
</body>
</html>
You can test in live editor if you want
margin: 0 auto;
This will automatically horizontally center your div with top and bottom margin of 0; You can also do:
margin: 0 auto 0 auto;
In order to control top and bottom margins, margin values go like:
margin: top right bottom left;
width: 100%; // can be in pixels also.
margin: 0 auto;
Try with padding: http://jsfiddle.net/5oxg9aay/1/
body, html {
margin: 0;
height: 100%;
}
#master_wrapper {
width: 58px;
height: 58px;
background: #57a957;
padding: 4%;
}
#header {
background: red;
width: 100%;
height: 100%;
}
or use a position: absolute; in the header and work with left/right/top/bottom but you need to make #master_wrapper the mother container for #header.
I would like to make certain elements of my page have more fluid transitions as they size down. If you look here:
http://abezieleniec.com/SIDWeb/
You can see that when you size down to tablet and phone size the first blue bar snaps to different positions to meet with the main logo. This was obviously done with media queries but I'm wondering if there is a way to make it more fluid with percentages? I'm assuming this would require some JS...
Any ideas are welcome!
Thanks
It's not too hard a process as it happens! It's something I had to use for the website here: http://flourishworld.co.uk/
The key is to use :before with "margin-top: xx%":
.element:before {
margin-top: 50%;
position: relative;
content: "";
display: block;
}
From looking at your site...it may be easier to just present some altered code. First I changed your markup (this may not work for you)
<div id="home" class="jumbotrontop animated fadeIn">
<div class="biglogo" style="opacity: 1;">
<img src="images/biglogofull.png">
</div>
</div>
Using the code idea above:
#home:before {
margin-top: 55%;
position: relative;
content: "";
display: block;
}
But for this to work you need some amended CSS code for other elements...
.jumbotrontop {
font-size: 21px;
height: 100%;
line-height: 2.1428571435;
color: inherit;
width: 100%;
background-size: cover;
z-index: 1;
}
.biglogo {
width: 80%;
display: block;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
margin-bottom: 130px;
opacity: 1;
position: absolute;
z-index: 100;
top: 0;
position: relative;
display: table;
}
.jumbotrontop img {
width: 100%;
height: auto;
margin: auto;
max-width: 740px;
display: block;
}
#home:after {
background-color: #eeeeee;
background-image: url(../images/background1.jpg);
display: block;
position: fixed;
top: 0;
left: 0;
content: "";
bottom: 0;
right: 0;
z-index: 1;
background-size: cover;
}
What this does is it takes your top element and takes it's height away, it's contents are positioned absolutely so it doesn't take up space. The :before element then adds a responsive height that will shrink as the width of the page shrinks. In doing so we had to change the logo markup around so that it stayed in a central location and continued to shrink as the window did.
Hope this helps! No JS, all CSS.
I have been struggling with this problem for over 2 hours,
Is there a way to make a div fixed while it is inside a bigger div.
When I scroll I want to keep the right part not scrolling.
So my question is, is there a way to do this without jquery?
Thanks
You have to position the inner div absolutely:
.outerDiv {
position: relative;
/* give it some height */
}
.contentDiv {
height: 100%;
overflow: auto;
}
.innerDiv {
position: absolute;
right: 0;
left: 50%;
top: 0; bottom: 0;
}
Here's the fiddle: http://jsfiddle.net/wSxss/
Adjust the positioning values according to your needs.
This fiddle demonstrates the following solution:
HTML
<div class="wrapper">
<div class="scroller></div>
<div class="fixed"></div>
</div>
CSS (example of key parts)
.wrapper {
position: relative;
height: 40px;
overflow: hidden;
}
.scroller {
padding-right: 200px;
height: 100%;
overflow: auto;
}
.fixed {
position: absolute;
top: 0;
right: 15px;
bottom: 0;
width: 160px; /* .scroller padding minus the right offset to accomodate scroll bar and minus any real separation between it and the scroller */
}
I have a problem with a slider(mainly border issues). You can see a slider here
Click on the 6. Owner option and there you can see a border. This border should come on all the other tabs.
My solution would be to wrap div #slides in yet another div with this css:
height: 231px;
left: 438px;
overflow: hidden;
position: absolute;
top: 185px;
width: 683px;
and from the declaration of ".tophdr_rt_slider #slides" remove two attributes:
float: left;
margin-top: -236px;
After that it works like a charm.
Add this code:
<style type="text/css">
.slide {
overflow:hidden;
}
.slide img {
margin: 2px 10px 0px 10px;
}
</style>