I am a beginner and trying to to my own wordpress theme from scratch (using bootstrap, stripping away everything and adding my own). Now I have got stuck on an annoying problem.
I have a div containing 3 smaller divs which gonna be menu-items as images. I have gotten the 3 to be horizontally centered in comparison to the outer div but not vertically.
I have set the inner divs to be as high as the outer but im not able to get the inner contents to also be vertically centered.
This is my code:
HTML
#menu {
margin: 0 auto;
width: 60%;
height: 300px;
}
div.menu_item {
display: inline-block;
height: 100%;
}
div.menu_item img {
-webkit-border-radius: 15px;
border: 1px solid #CCC;
border-radius: 15px;
clear: both;
height: 150px;
margin: 4px 15px;
padding: 10px;
width: 150px;
}
<div id="menu">
<div class="menu_item">
<p>
<a title="" href="myimg"><img alt="" src="/myimg.png" width="125" height="125" /></a>
</p>
</div>
<div class="menu_item">
<p>
<a title="" href="myimg"><img alt="" src="/myimg.png" width="125" height="125" </a></p>
</div>
<div class="menu_item">
<p>
<a title="" href="myimg"><img alt="" src="/myimg.png" width="125" height="125" </a></p>
</div>
</div>
Im aware of that this might be very messy and almost certain some things arent needed and could be stripped away but I have tried to figure it out for myself and this is what Ive came to this far.
Screenshots of it is here:
outer div
one of the inner divs
The first shows the outer div, the second shows one of the inner divs.
UPDATE: Solution was fiddling around with flexbox and it was quite easy even for me. Also, I tried to strip away as much as I could from the CSS and still have the same result and apparently almost no code is required.
This is my CSS now
#menu
{
margin:0 auto;
width:60%;
height:300px;
display: flex;
justify-content: center;
align-items: center;
}
This makes the content of #menu to be centered both vertically and horizontally.
This should work:
div.menu_item
{
width: X%; /*change to display: table; if you're targeting IE8 or greater, requires !DOCTYPE */
margin: 0 auto;
...
}
The width just must be less than the outer div, I put X to represent the percentage.
The same can be done with height:
...
height: X%;
...
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I'm working on a photo page for a site I'm creating, however it seems that the link is extending into the whitespace beneath the image. The problem disappears when I remove the surrounding <section> but I'm not sure why.
Here's a Jsfiddle better showcasing my code and the problem
.photo {
text-align: center;
float: left;
width: 70%;
margin-left: 8%;
margin-top: 5%;
margin-bottom: 5%;
}
.photo a {
border: 1px solid red;
}
.photo img {
margin: 1%;
}
<section class="photo">
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
</section>
I added a border to the problem area. Any help is much appreciated!
because a and img are inline elements, so
make a a block level element by display:block, to the border appear around the image
set display:block to img to remove underneath whitespace caused by being an inline element. (other solution would be setting vertical-align-bottom, given img by default is vertical-align:baseline)
Note: I gave the img a max-width:100% to be responsive, and if you give the border to img instead of a, the a being display:block isn't necessary anymore, although is good to have it.
See more about inline elements here on w3
.photo {
text-align: center;
float: left;
width: 70%;
margin-left: 8%;
margin-top: 5%;
margin-bottom: 5%;
}
.photo a {
display: block;
}
.photo img {
display: block;
border: 1px solid red;
max-width: 100%;
margin: 1%
}
<section class="photo">
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
</section>
This question already has answers here:
Images side by side without any space between them
(5 answers)
Closed 7 years ago.
I've written a very basic registration form for a football team, which is working as expected.
However, after adding two place-holder images at the bottom of the page, they are exhibiting a gap between each other in Chrome, Firefox and IE11. I'm wondering why this would be, as I've used this CSS Reset, and I haven't specified any margins or spacing for the images. Furthermore, using 'Inspect element' in Chrome does not show any graphical representation of the gap in any way.
html,body,div,span,applet,object,iframe,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,label,legend,p,blockquote,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body{line-height:1;color:black;background:white;}:focus{outline:0;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}abbr,acronym{border:0;}
.wrapper {
margin: 50px auto;
max-width: 728px;
min-width: 320px;
}
#sponsors {
display: block;
margin-top: 10px;
text-align: center;
}
<div class="wrapper">
<div id="sponsors">
<img alt="Sponsor 1 Place-holder" src="http://dummyimage.com/150x75/eee/000&text=Sponsor+Placeholder" />
<img alt="Sponsor 2 Place holder" src="http://dummyimage.com/150x75/eee/000&text=Sponsor+Placeholder" />
</div>
</div>
I've provided the minimal amount of code as this still demonstrates the same behaviour. Any information would be much appreciated.
Images are inline elements by default and therefore whitespace has an effect.
One option to remove this is to set the font-size of the parent to 0.
See this question on SO for others.
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
.wrapper {
margin: 50px auto;
max-width: 728px;
min-width: 320px;
}
#sponsors {
display: block;
margin-top: 10px;
text-align: center;
font-size: 0;
}
<div class="wrapper">
<div id="sponsors">
<img alt="Sponsor 1 Place-holder" src="http://dummyimage.com/150x75/eee/000&text=Sponsor+Placeholder" />
<img alt="Sponsor 2 Place holder" src="http://dummyimage.com/150x75/eee/000&text=Sponsor+Placeholder" />
</div>
</div>
This is the newline between the img tags being visible (any amount of whitespace is treated as a single space). You could put the tags on the same line, or add font-size:0px; to your #sponsors rule.
You can use HTML comments to remove the inline whitespace caused by putting the <img> tags on two separate lines.
<div class="wrapper">
<div id="sponsors">
<img alt="Sponsor 1 Place-holder" src="..." /><!--
--><img alt="Sponsor 2 Place holder" src="..." />
</div>
</div>
... which would be the same as writing it as
<div class="wrapper">
<div id="sponsors">
<img alt="..." src="..." /><img alt="..." src="..." />
</div>
</div>
This question already has answers here:
Remove white space below image [duplicate]
(9 answers)
Closed 7 years ago.
I have a margin between the images and the Share us and I don't really know where it comes from.
img: https://liko.tinytake.com/sf/MTU4MjUyXzk4ODk1MA
My HTML5 code:
<div id="socailMedia">
<p>Follow us:</p>
<div id="followImg">
<img src="socailMedia/facebook.png" alt="followFacebook">
<img src="socailMedia/twitter.png" alt="followTwitter">
<img src="socailMedia/instagram.png" alt="followInstagram">
<img src="socailMedia/pinterest.png" alt="followPinterest">
<img src="socailMedia/google.png" alt="followGoogle">
</div>
<p>Share us:</p>
</div>
My CSS code:
#socailMedia{
color:#939393;
width: 350;
float:left;
margin-left: 20;
}
#socailMedia p {
margin: 0;
background-color: red;
}
#followImg img{
background-color: red;
height: 35;
padding:0;
margin: 0;
}
You need to add vertical-align: bottom to the #followImg img elements:
#socailMedia {
color: #939393;
width: 350;
float: left;
margin-left: 20;
}
#socailMedia p {
margin: 0;
background-color: red;
}
#followImg img {
background-color: red;
height: 35;
padding: 0;
margin: 0;
vertical-align: bottom;
}
<div id="socailMedia">
<p>Follow us:</p>
<div id="followImg">
<img src="http://dummyimage.com/35x35/FC0/000" alt="followFacebook">
<img src="http://dummyimage.com/35x35/FC0/000" alt="followTwitter">
<img src="http://dummyimage.com/35x35/FC0/000" alt="followInstagram">
<img src="http://dummyimage.com/35x35/FC0/000" alt="followPinterest">
<img src="http://dummyimage.com/35x35/FC0/000" alt="followGoogle">
</div>
<p>Share us:</p>
</div>
By default images are aligned with the baseline which rests few pixels above the bottom of the parent. Setting vertical alignment to bottom will cause the images to align with the bottom of the paragraph.
Perhaps from the enclosing "followImg" div. You've cancelled the margin attribute for the nested img tags, but haven't addressed their encompassing div. There may also be padding involved, depending on how the CSS is inherited. You can use the Web inspector in Chrome, Safari, or Firefox to take a look at the active attributes for these elements, and better troubleshoot the situation.
The following might be all that's needed:
#followImg {
padding: 0;
margin: 0;
}
There is a padding that comes with paragraph tags. Try this instead:
<div id="socailMedia">
<p>Follow us:</p>
<div id="followImg">
<img src="socailMedia/facebook.png" alt="followFacebook">
<img src="socailMedia/twitter.png" alt="followTwitter">
<img src="socailMedia/instagram.png" alt="followInstagram">
<img src="socailMedia/pinterest.png" alt="followPinterest">
<img src="socailMedia/google.png" alt="followGoogle">
</div>
<p style="margin:0;">Share us:</p> <!-- CHANGE THIS -->
</div>
I have a small 2x2 HTML table. Each cell contains one image and one piece of text.
Example image:
As you can see, the text is vertically below the vertically middle level of the image. How can I make the text vertically in the center, relative to the image on the left?
I have tried a several different display values, which I can't fix this.
JSFiddle: http://jsfiddle.net/ahmadka/rbJNQ/
this all div behave like a
table: it is a rectangular block that participates in a block formatting context
.main-container is TABLE
.container is ROWS
.inner-container is CELLS
now all div behave like a table I just vertical align middle image so all content align in middle
.main-container{
display:table;
background:#bcbbbb;
width:100%;
height:100vh;
}
.container{
display:table-row;
}
.inner-container {
vertical-align: middle;
display: table-cell;
text-align: center;
}
.inner-container figure{
background-color:#807c7c;
vertical-align: middle;
display: inline-block;
margin: 0;
}
.inner-container p {
display: inline-block;
}
<div class="main-container">
<div class="container">
<div class="inner-container">
<figure>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
</figure>
<p>Example</p>
</div>
<div class="inner-container">
<figure>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
</figure>
<p>Example</p>
</div>
</div>
<div class="container">
<div class="inner-container">
<figure>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
</figure>
<p>Example</p>
</div>
<div class="inner-container">
<figure>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
</figure>
<p>Example</p>
</div>
</div>
</div>
Well. Try this:
<td>
<a id="social_twitter" onclick="window.open(this.href,'external'); return false;" href="http://twitter.com/JenierTeas">
<span>icon</span>
</a>
<span style="vertical-align: middle;">Twitter</span>
</td>
Your code looks way to complicated for this. It is also not really tabular data, so you should not use a <table>-element.
You can solve it as easy as this. I included only the important CSS rules in this answer.
HTML
<div class="social_body">
<a class="facebook">Facebook</a>
<a class="twitter">Twitter</a>
<a class="google">Google+</a>
<a class="share">Share This</a>
</div>
CSS
.social_body {
width: 280px;
overflow: hidden;
margin: 0 auto;
border: 1px dashed black;
}
.social_body a {
float: left;
width: 50%;
font-size: 16px;
line-height: 24px;
}
.social_body a:before {
content: '';
float: left;
width: 24px;
height: 24px;
margin: 0 10px 0 0;
background: transparent 0 0 no-repeat;
}
.social_body a.facebook:before {
background-image: url(http://i.imgur.com/QglLT5Q.png);
}
.social_body a.twitter:before {
background-image: url(http://i.imgur.com/QglLT5Q.png);
}
/* […] You see where this is going. */
Demo
Try before buy
Use This Css
//CSS
#nst_block #social_body table {
background: none repeat scroll 0 center transparent;
border: 1px dashed black;
height: 75px;
margin: 0 auto;
width: 280px;
}
#nst_block #social_body table a {
border: 0 none;
font-family: inherit;
font-size: 16px;
font-style: inherit;
font-weight: inherit;
line-height: 24px;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: baseline;
}
Updated Link :http://jsfiddle.net/rbJNQ/16/
I realize that this question is 4 years old, but hey, why not answer it - maybe it helps someone else, since the OP probably solved it one way or another in the meantime.
In 2017 your problem, Ahmad, is solved fairly easy with the help of a flexbox (just Google it, you'll surely like it - if you haven't heard of it already, that is) set for the direct 'children' of the table's td-s. What you have to do is add the following to the CSS in your fiddle:
#nst_block #social_body table td > *
{
display: flex;
justify-content: flex-start;
align-items: center;
}
The main axis positioning is done by justify-content and the cross axis positioning (the vertical one, in your case) is done by align-items.
That's all.
You can design it using tables. Keep icon in one cell and text in other cell. Make them vertical-align as middle. So how what ever height the icon may be, text will be aligned vertically middle. Or If you are targeting only new browsers, then you can design this using flex box model.