I have a bunch of buttons in a row, with content vertically centered inside:
.button {
width: 18%;
margin: 0 1%;
height: 160px;
padding: 10px;
display: table;
float: left;
}
.button-inner {
display: table-cell;
text-align: center;
vertical-align: middle;
}
But for some reason, the buttons don't respect the margins when viewed on mobile browsers (Safari 8 and Chrome 41 on iOS 8.3).
If I change display: table to display: inline-block then the margins are fine, but then I lose the vertical centering achieved by using display: table-cell on .button-inner.
(I could vertically center .button-inner using the position: absolute, but it requires some tweaking across media queries to ensure it centers nicely.)
Any ideas why this margin issue is happening?
:) Also don't forget to add vendor prefixes.
.button {
width: 18%;
margin: 0 1%;
height: 160px;
padding: 10px;
display: flex;
align-items: center;
float: left;
}
.button-inner {
text-align: center;
}
Related
I used display: flex and justify-content: center to center the img within the div, it did in fact center the img but it shrank the img to a very small size. How do I center the img without having it shrink? I included a picture of this. I also tried re-sizing it with .img-star img { width: 3em; }, but it doesn't work. Pls help thanks.
.img-star {
border: 1px solid white;
padding: 20px;
margin: 30px;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
}
Not use flex. Use this CSS:
div {
text-align: center;
}
Don't use flex. just use this on your div
div {
text-align: center
}
Adding the align-items: center property could potentially fix it. It will also center the image vertically, if that is wanted.
I tried it with a div and it worked as intended It also appears to be fixing distorted images, such as this answer
img-star {
border: 1px solid white;
padding: 20px;
margin: 30px;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
}
set img display to block and set left + right margins to auto, e.g.
.img-star {
margin: 30px auto;
display: block;
padding: 20px;
border: 1px solid white;
border-radius: 50%;
width: 45px;
height: 45px;
}
You have also set the width of this class at 45px, so when this class is applied to an img it will be shrinking it to 45px. Try upping the width and height. width: 100%; height: 100%; will preserve your original image size to the max size of the block the image is in. Changing it based on px or em will set it to that e.g. width: 300px;.
I am having an issue with the web page display on iPad. The last div jumps out at the bottom when viewed in iPad (landscape mode). See screenshot below
Here is the CSS.
div .container-home
{
float: left;
width: 290px !important;
padding: 20px;
}
img.section-icon
{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
max-height: 150px;
}
h2.section-head
{
text-align: center;
line-height: normal;
font-size: 22px;
}
p.section-description
{
text-align: center;
}
I would really appreciate any help.
Many thanks!
Are you including a viewport?
Its because of float left and the width of them together is more than the display. You define their width for 290px and also a padding of 20px which means they're 330px and you will need a display width of 1320px at least.
Try using a gridsystem for them or give them a width value in per cent.
If you don't know what gridsystem to use, I recommend Skeleton because it is very light.
EDIT: Don't use !important because then you cannot change the value anymore !important will overwrite any other rule
Don't use hard value for width, example
div .container-home
{
float: left;
width: 20% !important;
padding: 20px;
}
img.section-icon
{
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
max-height: 150px;
}
h2.section-head
{
text-align: center;
line-height: normal;
font-size: 22px;
}
p.section-description
{
text-align: center;
}
CodePen
I want to align the both vertically and horizontally, the height and width of the container will be fixed regarding other extenal factors.
How do i do that?
I've tried using flex
display: flex;
justify-content: center;
flex-direction: column;
but it gets rid of my horizontal alignment
Actually, there are multiple ways to achieve vertical alignment, here is one:
div {
width: 300px;
height: 150px;
background-color: #ddd;
text-align: center;
font-size: 0;
}
div::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
a {
width: 100px;
height:50px;
background-color: #ff0000;
display: inline-block;
vertical-align: middle;
font-size: 16px
}
<div>
Some Text
</div>
Found the solution!
On the div parent:
position:relative;
On the a child:
position: absolute;
top: 50%;
left: 50%;
margin-left: -half_its_width;
margin-top: -half_his_height;
The jsfiddle for the code can be found here: http://jsfiddle.net/c4rz0hk1/
The nav-wrapper at the bottom should be centered below the dividing line div at the bottom of the page. The works correctly in Firefox, but in Chrome it placed to the r-hand side of that same line. This is strange as the wrapper is set to 1024px anyways...
Here's a snippet of the css code:
footer {
text-align: center;
width: 1024px;
}
#nav-wrapper {
display: -moz-inline-stack;
display: inline-block;
text-align: center;
width: 900px;
*display: inline;
}
Because footer has floated children, a overflow:hidden should be applied to it so it properly contains them, also your bottom nav needs to have floats cleared as it's siblings are floating causing it to 'go with the flow' (lame joke, sorry I couldn't stop myself :P).
To center the nav simply apply a margin: 0 auto; to it after clearing the floats.
Here's the updated css that I believe works according to your requirements -
footer {
overflow: hidden;
text-align: center;
width: 1024px;
}
#nav-wrapper {
clear: both;
display: block;
margin: 0 auto;
padding: 10px 0; /* Some padding to give the footer some vertical breathing space */
text-align: center;
width: 900px;
}
Updated fiddle: http://jsfiddle.net/c4rz0hk1/1/
Try this:
#-moz-document url-prefix() {
#nav-wrapper {
display: -moz-inline-stack;
text-align: center;
width: 900px;
}
}
#nav-wrapper {
display: inline-block;
text-align: center;
width: 900px;
}
I have two buttons next to each other using flex and I have their contents vertically centered, which work great so far. However, when my site is viewed on mobile pages (using responsive design to scale the page), the second button, which has less text in it becomes a different size than it's companion.
So, the goal is to vertically align the text on my buttons as well as to have the two buttons always match each others size.
<section class="buttonsSection">
<a class="button" href="#">Very Long Word</a>
<a class="button" href="#">Short Phrase</a>
</section>
.button {
padding: 20px 10px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
text-align: center;
}
.buttonsSection {
margin: 30px 0;
display: flex;
align-items: center;
justify-content: center;
}
body
{
width: 20%; /*Simulate page being reduced in size (i.e. on mobile)*/
margin: 0 auto;
}
JSFiddle: http://jsfiddle.net/Dragonseer/WmZPg/
If the problem isn't obvious right away, try reducing the width of the Result window.
Solution inspired by this question, was to set the buttonsSection to flex and center, and setting the button to flex, column and center.
See Fiddle here: http://jsfiddle.net/Dragonseer/Nbknc/
.button {
...
display: flex;
flex-direction: column;
justify-content: center;
}
.buttonsSection {
margin: 30px 0;
display: flex;
justify-content: center;
}
Just add align-items: stretch; to .buttonsSection
see that Working Fiddle
.buttonsSection {
margin: 30px 0;
display: flex;
justify-content: center;
align-items: stretch;
}
also: when using flex you'll have to pay attention to the vendors specific prefix's.
read more about it here
Update:
If you're using my original proposal, you can also control the vertical-alignment.
check out this Working Fiddle
HTML: (same)
Very Long Word
Short Phrase
CSS:
body
{
width: 20%; /*Simulate page being reduced in size (i.e. on mobile)*/
margin: 0 auto;
}
.buttonsSection
{
margin: 30px auto;
display: table;
border-spacing: 3px 0;
}
.button
{
display: table-cell;
vertical-align: middle;
padding: 10px 15px;
background-color: deepskyblue;
color: white;
text-align: center;
max-width: 100px; /*Or any other width you want*/
}