I have a div "general" which is centered on the page. Inside I have a fixed div at the top. Outside of that div "general" have the "footer" that is fixed to the bottom of the page. So far so good .. the problem is that the div "content" must be centered vertically and horizontally within that div "general ".... Can someone give me some tips there positioning?
<body>
<div id="mb_background" class="mb_background">
<img class="mb_bgimage" src="images/default.jpg" alt="Background"/>
<div class="mb_loading"></div>
</div>
<div id="mb_geral">
<div id="mb_topo">
<div id="mb_logo">
<img src="images/logo_dentro.png" alt="Logotipo"/>
</div>
<div id="mb_menu">
</div>
<br clear="all"/>
</div>
<div id="mb_conteudo">
alguma coisa aqui
</div>
</div>
<div class="mb_footer">
<a class="mb_left" href="" target="_blank"><img src="images/facebook.png"/></a>
<a class="mb_left" href="" target="_blank"><img src="images/twitter.png"/></a>
<a class="mb_left" href="" target="_blank"><img src="images/news.png"/></a>
</div>
</body>
margin:0 auto;
in your css will centre the content div horizontally, to center it vertically, youd need
top:50%;
margin-top:-[insert half of the content div's height here];
Related
In advance, I apologize for my bad English.
My logo (which should be positioned in the horizontal center on the header) gets shifted like 5px to the left.
The hamburger icon is also like 5px wide, so I tested what would happen if I set the hamburger icon property display:none; and the logo shifted perfectly to the horizontal center.
I already set the margin-left and margin-right properties for the logo to auto and it works fine, except for the 5px shift to the left.
Do you have any idea how to solve this problem?
I'm grateful for any answer.
<div
class="fusion-header-v6 fusion-logo-center fusion-sticky-menu- fusion-sticky-logo- fusion-mobile-logo- fusion-header-has-flyout-menu">
<div class="fusion-header-sticky-height"></div>
<div class="fusion-header">
<div class="fusion-row">
<div class="fusion-header-v6-content fusion-header-has-flyout-menu-content">
<div class="fusion-logo" data-margin-top="31px" data-margin-bottom="31px" data-margin-left=""
data-margin-right="0px">
<a class="fusion-logo-link" href="#">
<!-- standard logo -->
<img src="link" srcset="link 1x" width="2792" height="1216" retina_logo_url=""
class="fusion-standard-logo" />
</a>
</div>
<div class="fusion-flyout-menu-icons">
<a class="fusion-flyout-menu-toggle" aria-hidden="true" aria-label="Toggle Menu" href="#">
<div class="fusion-toggle-icon-line"></div>
<div class="fusion-toggle-icon-line"></div>
<div class="fusion-toggle-icon-line"></div>
</a>
</div>
</div>
</div>
</div>
</div>
I am working on my portfolio. I have this page here:
The first picture there is a date on. I would like a text in the bottom, like this:
But I cannot get that text placed. Everytime I add a div tag and set in a text, it is going outside of the picture. I guess it is a div tag there has to be somewhere?
<div class="portfolio logo" data-cat="logo">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="date">
<span class="day">10</span>
<span class="month">aug</span>
<span class="month">2016</span>
</div>
</a>
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="image-caption">
<div class="col-md-4 col-sm-6 col-xs-12">
<h2>link</h2>
</div>
</div>
<img src="img/portfolios/logo/5.jpg" alt="" />
</div>
</div>
</div>
If we are talking about the h2 element, that html tag sits inside a element that is hidden by default and only appears on hover.
I will move it outside the .image-caption div
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="col-md-4 example col-sm-6 col-xs-12">
<h2>link</h2>
</div>
<div class="image-caption">
</div>
<img src="img/portfolios/logo/5.jpg" alt="" />
</div>
</div>
and give it those styles
.example {
position: absolute;
bottom: 0;
z-index: 1;
text-align: center;
left: 0;
}
Adjust than bottom and left values to match the positioning for your design
You'll have to create a css for your image-caption class, that will be in absolute position, meaning it can clash with other things. This should help you with that: Position absolute but relative to parent . Then just make sure you have your z-index right so it's not behind the image
I have a three column layout and one of them is like -
<div class="column one-second product_image_wrapper">
<div class="images">
<div class="image_frame scale-with-grid" ontouchstart="this.classList.toggle('hover');">
<div class="image_wrapper">
<a href="#" itemprop="image" class="woocommerce-main-image zoom" title="Sumanji Kamphy" data-rel="prettyPhoto">
<div class="mask">
</div>
<img width="250" height="250" src="#" class="scale-with-grid wp-post-image" alt="Sumanji Kamphy" title="Sumanji Kamphy">
</a>
<div class="image_links">
<a href="#" itemprop="image" class="woocommerce-main-image zoom" title="Sumanji Kamphy">
<i class="icon-search">
</i>
</a>
</div>
</div>
</div>
</div>
</div>
I want to center this image both vertically and horizontally currently it looks something like this -
Can someone tell how to do this ?
Assuming that you want to put it in center with relative to the div with class image_frame , the following code will work.
.image_frame{
position:relative;//makes the outer div as relative, thus you can use which if you want some other div
}
.image_frame img{
position:absolute;
top:50%;
left:50%;//brings the edge of image to exact center both horizontally and vertically
margin-top:-125px;
margin-left:-125px;//Now pushing it half of images width and height in your case it is 250px so -125px is good for pushing the image to exact center.
}
I need to align the play button image in the center of another image.
The example that I have is breaking when titles are long.
How can we align blue color image exactly over the large image
Fiddle
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
</div>
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff&text=>" />
</div>
<div class="video-details-wrapper"> <span>this is video short video title</span>
Just put your play-item-wrapper inside the container video-image-wrapper and add a relative positioning on it.
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff&text=>" />
</div>
</div>
<div class="video-details-wrapper">
<span>this is video short video title</span>
</div>
</div>
And in CSS
.video-image-wrapper { position: relative; }
JSFiddle: https://jsfiddle.net/L51bd8vr/
im making a container that contains 3 images and three "text bits"
My problem is that I cant seem to get the text to appear on the right side of each image.
Here a SS: http://imgur.com/ujBIjYC
The html:
<div class="textandimg">
<div class="image">
<a href="#">
<img src="img/belahotellforside.png" alt="belahotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
<div class="image">
<a href="#">
<img src="img/caprocatforside.png" alt="caprocatforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
<div class="image">
<a href="#">
<img src="img/granhotellforside.png" alt="granhotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
</div>
and the css:
.textandimage{
clear:both;
}
.image{
float:left;
width: 100%;
margin-left: 10px;
}
.text{
float:left;
}
If I put :
.text{
float:right;
}
The text appears on the right side. But its still inline with the picture. And I want the text to be side by side.
Appreciate any help. Thanks.
If your div with image class has setted width: 100% it take 100% of the width. So you can remove it or set to an value in "px".
Delete all that CSS and just put this:
.image{
float: left;
margin-left: 10px;
}
All you want is just to float the images to the left of the text divs, so that's all you need.
http://jsfiddle.net/M8CQD/
Edit: From your comment, it also looks like you need to put each image and text div together in a div in order to push the images down below the preceding image.
<div class='row'>
<div class="image">
<a href="#">
<img src="img/belahotellforside.png" alt="belahotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
</div>