I have a problem with images. The images are not floating, but it does work in the center. However, i want the images floating and center of the div.. Here is my code.
HTML
<div class="middle-align">
<div id="gallery-left">
<div class="gallery-left-middle">
<p class="gallery-photo"> <a rel="gallery_group" href="#" title=""><img alt="" src="assets/images/welcome.jpg" /></a> </p>
<p class="gallery-photo"> <a rel="gallery_group" href="#" title=""><img alt="" src="assets/images/welcome.jpg" /></a> </p>
<p class="gallery-photo"> <a rel="gallery_group" href="#" title=""><img alt="" src="assets/images/welcome.jpg" /></a> </p>
<p class="gallery-photo"> <a rel="gallery_group" href="#" title=""><img alt="" src="assets/images/welcome.jpg" /></a> </p>
</div>
</div>
</div>
CSS
.gallery-left-middle {text-align:center;}
#gallery-left img{float:none;display:inline-block;width:180px;height:180px;}
I followed this question : Question solved. But it still doesn't work.
The problem is the images are not floating, but it's in the center. Any ideas?
It's because p is block element and it will automatically fill width of his parent div and because img has text-align:center, it is in center of that p element.
If you want to have those images floated, you can try set display:inline-block on those p elements instead of img elements.
.gallery-left-middle {text-align:center;}
.gallery-photo {display: inline-block;}
img{width:180px;height:180px;}
Working Fiddle
Related
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 have a rollover effect over an image which can be seen here: http://www.sdimmigrationlawyers.com/ (bottom of page - deportation image)
I want to add a link to it, but my tag isn't working. How should I implement it to (1) have the rollover effect, and (2) have the link?
CSS:
<div class="view view-sixth">
<img class="alignleft wp-image-335 size-full" alt="" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg">
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<div class="mask"></div>
</a>
<p>
</p>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</div>
HTML:
<div class="paragraph_dui_crime_box2">
<h2>San Diego Deportation Lawyer</h2>
<div class="view view-sixth">
<img class="alignleft wp-image-335 size-full" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg" alt="" />
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<div class="mask"></div>
</a>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</div>
You could try wrapping the <a> tag around the whole section like so :
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<img class="alignleft wp-image-335 size-full" alt="" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg">
<div class="mask"></div>
<p>
</p>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</a>
Your code with the headline "CSS" is HTML, so I assume it's what's the HTML-code of your page.
If you haven't any restrictions in HTML-markup, do the following and make sure that the DIV with the h2 is wrapped in an anchor leading somewhere:
<a href="...">
<div class="content"><h2>Deportation Defense</h2></div>
</a>
Currently, your anchor surrounds something with no content (that is not clickable), the content on the other side is not properly wrapped in an anchor (so it's neither clickable).
I am trying to lower the image to the middle of text inside of anchor element
<td width="356px" style="padding:0px;">
<a style="color:#094072;text-decoration:none;font-weight:bold;font-size:14px;'" href="">
<span>testttttt</span>
<img src="/test.jpg" style="padding-top:5px;">
</a>
</td>
as you can see the Image has style="padding-top:5px;" but instead of lowering the image only, it's pushing the text too.
I can't use float because its suppose to work on email clients.
Thanks for any help
Baaroz
Edited: just set the align attribute for you img element: align="middle"
<td width="356px" style="padding:0px;">
<a style="color:#094072;text-decoration:none;font-weight:bold;font-size:14px;'" href="">
<span >testttttt</span>
<img src="/test.jpg" style="padding-top:5px;" align="middle">
</a>
</td>
Apply vertical-align: middle; to your image...
<td width="356px" style="padding:0px;">
<a style="color:#094072;text-decoration:none;font-weight:bold;font-size:14px;" href="">
<span>testttttt</span>
<img src="/test.jpg" style="vertical-align:middle;" />
</a>
</td>
fiddle
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];
I have this html code:
<div id="social">
<div class="barra_gris"></div>
<div class="caixa_social"><a class="twitter" href="#" target="_blank"><img src="img/twitter.png" alt="twitter" /></a>
<a class="facebook" href="http://www.facebook.com/pages/grup-abs/329596937580" target="_blank"><img src="img/facebook.png" /></a>
</div>
<div class="idiomes">català | castellano</div>
</div>
<div id="logo"><img src="img/logo.png" alt="logo" /></div>
</div>
And barra_gris has this css:
.barra_gris{
position:relative;
width:905px;
height:15px;
background-color:#6b6b6b;
display: block;
}
The problem is that Chrome and Opera doesn't show the barra gris class with this background?
The url of site is: http://abs.marcmorales.es/
What could the problem be?
Add between the div and it will work like following
<div class="barra_gris"> </div>
In Google, Opera and IE I can see the grey bar on top with twitter and facebook logos plus the language options for Catala and Castellano. Plus the grey bar on top of the page... http://imageshack.us/photo/my-images/267/barragris.png/
Since this Div does not contain any data so by default its height becomes 0. So either put some height to this div or use