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%;
...
Related
Im building my first responsive type website, So far doing the index page. Im having an issue when that i cannot align the footer divs together. i have three divs spread out and the last div on the right has social 4 icons. but im unable to get these to align with the other two divs texts. Ive tried a number of different things to fix it in the css and flex though id rather stick to css right now on this site.
Here is the site on test host to see the actual icons in the footer.
https://hireahottub2.netlify.com/
i feel the problem may lie in my code somewhere but i cannot see it for the life of me.
align-items: center
display:inline block is in the parent
<html>
<footer>
<div id="footerwrap">
<div class="fdiv1">
<h5>Hire A Hot Tub, Goole, DN14 6QT</h5>
</div>
<div class="fdiv2">
<h5>Web Design by DM DESIGN</h5>
</div>
<div class="fdiv3">
<a href="https://www.facebook.com/hireahottub2000" target="_blank"
><img src="./img/fb2.png"
/></a>
<a href="https://www.instagram.com/hireahottub2000" target="_blank"
><img src="./img/insta2.png"
/></a>
<a href="https://twitter.com/HireahottubUK" target="_blank"
><img src="./img/twitter2.png"
/></a>
<a href="mailto:hireahottub2000#hotmail.com" target="_blank"
><img src="./img/email2.png"
/></a>
</div>
</div>
</footer>
</html>
/* FOOTER CSS */
footer{
padding: 5px;
margin-top:;
color:#ffffff;
background-color: #354243;
text-align: center;
font: bold;
border-top: #e8491d 3px solid;
}
#footerwrap{
width: 80%;
text-align: center;
}
.fdiv1{
float: center;
display: inline-block;
width: 20%;
}
.fdiv2{
float: left;
width: 20%;
}
.fdiv3{
float: right;
width: 20%;
min-width: 75px;
}
.fdiv3 img{
width: 30px;
}
For your issue specifically, I'm seeing that your divs fdiv1 and fdiv2 only align in the center because of browser-set margins on the heading tags within them. Furthermore, they have zero concept of the height of any other div, because they are floated (removed from document flow). To fix this, you will need to set them all an equal height. Then vertical-align will actually work.
h5 {
margin: 0;
}
.fdiv1, .fdiv2, .fdiv3 {
height: 50px;
}
a {
display: inline-block;
vertical-align: middle;
}
It may be beneficial for you to learn Flexbox. It makes these types of tasks easy, but it's not supported in older browsers.
My recommendations are:
Get rid of all of the float stuff.
Get rid of the width: 20% stuff on the footer items. (Maybe bring it back after you see the results of the rest of this.)
Get rid of the single inner <div> that's a child to the <footer> element (I guess you said you already did that somewhere else, just not on the current demo website).
Use the flex justify-content (space-between) and align-items (center) CSS attributes on your <footer> to spread your footer items out in the proper fashion.
Follow up...
I tried the above, ended up keeping the width: 20%, and got this as a result:
I guess you might want to switch the order of those first two footer items around, but that's not something I could do easily just playing with CSS attributes in my web console.
Use a css grid layout to achieve this.
footer {
padding: 5px;
color: #ffffff;
background-color: #354243;
text-align: center;
border-top: #e8491d 3px solid;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
}
footer div img {
width: 30px;
}
<footer>
<div class="fdiv1">
<h5>Hire A Hot Tub, Goole, DN14 6QT</h5>
</div>
<div class="fdiv2">
<h5>Web Design by DM DESIGN</h5>
</div>
<div class="fdiv3">
<img src="./img/fb2.png" />
<img src="./img/insta2.png" />
<img src="./img/twitter2.png" />
<img src="./img/email2.png" />
</div>
</footer>
Hello this is a solution if you want to stick with only CSS ( without flex ) :
footer{
padding: 5px;
position: relative;
margin-top:;
color:#ffffff;
background-color: #354243;
text-align: center;
font: bold;
border-top: #e8491d 3px solid;
}
.fdiv3{
width: 20%;
min-width: 75px;
position: absolute;
top: 50%;
right: 0;
transform: translate(0,-50%);
}
.fdiv2{
width: 20%;
width: 20%;
min-width: 75px;
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
}
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 4 years ago.
So if you look at the 2nd image, it shifts up when the text under spans onto two lines. Maybe this is to do something with the div containers that I'm missing? Can't seem to find the right solution. I'm not super HTML savvy but I'm sure this is a simple fix? ..help!
Screenshot Here
#wrapper {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.thumb {
position: relative;
display: inline-block;
width: 17.6%;
height: auto;
box-sizing: border-box;
margin: 10px 1%;
padding: 0;
text-decoration: none;
}
.thumb p {
font-family: "Helvetica", helvetica;
color: #aaa;
margin-left: 0em;
margin: 0.5em;
}
.thumb img {
width: 100%;
height: 230px;
display: block;
margin: 0 auto;
}
<body style="margin: 0px;">
<div id="wrapper">
<h1>GALLERY</h1>
<h2>LENDING LIBRARY</h2>
<a id="Altamont Wet WR" class="thumb" href="openwindow-https://www.urbanelectricco.com/altamontwall.html">
<img src="thumbs/altamontwall_mtn.jpg" />
<p>Altamont Wet WR</p>
<hr>
<h3>'Kromezone' Powder Coat, Clear Glass</h3>
</a>
<a id="Archibald" class="thumb" href="openwindow-https://www.urbanelectricco.com/archibald.html">
<img src="thumbs/archibald_mtn.jpg" />
<p>Archibald WR</p>
<hr>
<h3>Bronze Finish, Clear Glass & Black Finish, Clear Glass
</h3>
</a>
<a id="Belle Meade" class="thumb" href="openwindow-https://www.urbanelectricco.com/bellemeade.html">
<img src="thumbs/bellemeade_mtn.jpg" />
<p>Belle Meade WL</p>
<hr>
<h3>Vintage Finish</h3>
</a>
<a id="Belle Meade Double" class="thumb" href="openwindow-https://www.urbanelectricco.com/bellemeadedouble.html">
<img src="thumbs/bellemeadedouble_mtn.jpg" />
<p>Belle Meade Double WL</p>
<hr>
<h3>Polished Nickel Finish</h3>
</a>
Best way of getting the alignment to be the same across all of the thumbnails is add the following to the .thumb class:
vertical-align:top;
The reason why the issue arises is that the standard vertical alignment for any div is baseline (right at the bottom). When your text goes onto a second line, it naturally increases the height of that element (and is double the height of all of the other tags) and pushes everything else in that particular div upwards.
Hope that helps!
I am creating a website that has 3 images side by side with a bit of space in between.
I have made the images stay in the centre on my laptop but when I view it on another computer with a larger screen, the images move to the left rather than staying in the middle.
My code is as below
HTML:
<img alt="" src="Image/Mathsgames.png" /> </a>
<img alt="" src="Image/informationbooklet.png" /></a>
<img alt="" src="Image/Quizzes.png" /></a>
CSS:
#rotator {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 200px;
padding: 85px;
text-align: center;
}
Any help would be appreciated. If anybody knows any other way to centre 3 images together with a bit of padding in between that would be appreciated.
You're using the ID #rotator on all of the images. An ID can only be on the page once, so those should be classes instead. You're also closing the <a> tags twice, and no need for the trailing /> on <img> tags in html5.
To center them, since they are inline content, you apply text-align: center; to the parent. I don't see a parent in your code, so I added one called .images
To create space between the images, you can use left/right margin, which I've specified as margin: 0 1em where 1em is the left/right margin, so there will be 2em space between images. Adjust that as you see fit. You could also apply margin to just the center image with .rotator:nth-child(2) { margin: 0 1em; } or give the center image a class and use the class in the selector instead of :nth-child(2)
.images {
text-align: center;
}
.rotator {
display: inline-block;
height: 200px;
padding: 85px;
margin: 0 1em;
}
<div class="images">
<img alt="" src="Image/Mathsgames.png">
<img alt="" src="Image/informationbooklet.png">
<img alt="" src="Image/Quizzes.png">
</div>
They are left aligned, your laptop screen is just too narrow to show it. Wrap them in a container with text-align:center:
.container{
text-align:center;
}
https://jsfiddle.net/58fwtu3c/
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
I can't remove white space under my images after i added boarder.
How do i get rid of this?
<div style="width: 1200px;">
<div style="float: left; width: 358 px; margin: 0px 7px 0px 0px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_07.jpg"}}" alt="" /></div>
<div style="float: left; width: 358 px; margin: 0px 7px 0px 7px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_04.jpg"}}" alt="" /></div>
<div style="float: left; width: 358 px; margin: 0px 0px 0px 7px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_09.jpg"}}" alt="" /></div>
<div style="clear: both;"> </div>
</div>
</div>
</div>
http://postimg.org/image/5rvgc5h8p/
Fiddle: https://jsfiddle.net/mastervision/zap4smbm/
I use the Magento editor: http://postimg.org/image/c62ljlmoj/
Add this
div{
line-height: 0;
}
Fiddle
In your floated container, give your images display: block; and width: 100%.
This will cause the image to stretch it's width to it's parents width and if this parent has no height defined it should fit exactly.
If that doesn't work please post a comment under my answer and I'll setup a case for you when I find the time ;)
OFFTOPIC
Oh and ofcourse you'll want to get rid of all that inline CSS.
inline css is pure duplication of code and can be solved with external stylesheets.
In such a stylesheet you can style by name basically so you can do this in your stylesheet:
.my-image-box {
position: relative;
float: left;
width: 300px;
height: auto;
}
.my-image-box img {
display: block;
width: 100%;
}
Then in your HTML, after linking your fresh stylesheet you can do this:
<div class="my-image-box">
<img src="..." />
</div>
This means you don't have all that bulky CSS in your HTML file - making it alot smaller and as an added bonus, when you change something in your stylesheet you'll change it everywhere at the same time :D
IMO that is a double win!
It's because the source of your image is supposedly not the right size or aspect ratio for this size. If you could post a fiddle, I would be able to test this theory. You can fix it by using the object-fit property or using the background property.
Try
img {display: block;}
if images dimensions are right and you are still having white space.
One option would be to use the vertical-align property; e.g.
img {
vertical-align: baseline;
}
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.