I have inline block element (red circle) inside other block with some paddings. In Firefox this looks correctly and circle located at the middle of block occupied by equal paddings. However in Safari this looks incorrectly - circle a little bit moved to top and not centered vertically. I tried different vertical-align and line-height settings but this does not help, in Safari this still looks to different not like in Firefox.
HTML:
<div class="post-categories">
<a href="#">
<span class="cat-dot"></span>Uncategorized
</a>
</div>
CSS:
body {
line-height: 1.7;
font-family: Arial;
}
.post-categories {
position: relative;
font-size: 14px;
margin-bottom: 10px;
font-weight: bold;
text-transform: lowercase;
display: flex;
flex-wrap: wrap;
}
.post-categories a {
font-weight: normal;
text-decoration: none;
padding: 1px 15px 1px 10px;
background-color: #ffffff;
border: 1px solid #000;
margin-bottom: 5px;
margin-right: 10px;
border-radius: 5px;
}
.post-categories .cat-dot {
display: inline-block;
width: 13px;
height: 13px;
position: relative;
top: 1px;
line-height: 14px;
border-radius: 100%;
margin-right: 10px;
background-color: red;
}
Codepen where you can check this: https://codepen.io/dedalx/pen/xxbbMOo
Question - How I can make circle and text vertically centered in parent block in the same way in all modern browsers?
Related
I'm new to prgramming. I'm trying to align the multiple buttons on top to the center of the page, I have tried text-align and margin: 0; none of which have worked. Now, I have centered the buttons but the buttons are below each other. Is there any fix to this? How exactly do I center it? I'm using flask.
CSS:
#navBar {
border: 2px solid black;
margin: auto;
height: 30px;
width: 43%;
padding: 5px;
}
#searchInput {
position: absolute;
top: 20px;
right: 0;
height: 35px;
width: 185px;
border-radius: 10px;
font-family: 'Roboto', sans-serif;
font-size: 20px;
outline: none;
}
/*The buttons that I want centered*/
#dealsButton, #burgersButton, #drinksButton, #sidesButton, #dessertsButton{
border: none;
outline: none;
background-color: transparent;
color: #606060;
top: 30px;
font-size: 27px;
font-family: 'Roboto', sans-serif;
width: 40%;
margin-left: 30%;
margin-right: 30%;
}
This is the image. The border is aligned to the center and is supposed to contain the buttons next to each other as a Nav bar. I want each of the buttons to be centered too. I want all the buttons to be centered at the same place and then I will move each button individually to the left and right. But if you know a way to center all of them side by side, please let me know.
you have some problems in your CSS code that prevent you to reach your goal:
each button has a big margin on left-right, which makes it so that not enough items can fit in a single row
when you set each button size as percent, it refers to the parent element. if you have more than 2 buttons with 40% width, they will overflow the row to the next one.
about how to style multiple elements at the same time: Right now, you style each button based on its id, which is unique. But classes can be applied to multiple elements simultaneously, giving them all the same styling. So Instead of styling through ids (with #), I'm styling based on .btn, which tells the CSS to style everything with the class (represented by a dot) that's called btn
I also set display: flex, align-items: center, and justify-content: center on the parent element to tell it to align all items to center both horizontally and vertically.
so, here's a demo:
#navBar {
border: 2px solid black;
margin: auto;
height: 30px;
min-width: 43%;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
}
#searchInput {
position: absolute;
top: 20px;
right: 0;
height: 35px;
width: 185px;
border-radius: 10px;
font-family: 'Roboto', sans-serif;
font-size: 20px;
outline: none;
}
/* The buttons that I want to be centered */
.btn {
border: none;
outline: none;
background-color: transparent;
color: #606060;
font-size: 27px;
font-family: 'Roboto', sans-serif;
/* used to show a line seperator */
padding: 0 0.5em;
border-right: 2px solid black;
}
/* Remove border for last item */
.btn:last-of-type {
border-right: none;
}
<nav id="navBar">
<a class="btn">Deals</a>
<a class="btn">Burgers</a>
<a class="btn">Drinks</a>
<a class="btn">Sides</a>
<a class="btn">Desserts</a>
</nav>
I have a problem with text wrapping within my container. Working code snippet below.
In the sample above, everything works fine until the stepper-hor container has enough space to present the content:
I'd like the step-text container (box with blue border) to always stay to in line with step-additional-label container (box with green border). Step-text container (box with blue border) should also wrap the text inside when container's width shrinks.
Currently, when I set stepper-hor width to 350px, step-text container (box with blue border) goes below the box with green border:
What I wish to achieve is something like this:
I've tried using different variations of
display: inline-block;
overflow-wrap: break-word;
in lines 64-65 but that didn't work as expected and often messed up the horizontal alignment between the step-circle-active and step-text.
Any help is very much appreciated.
Here is a more editing-friendly sandbox to play around:
https://codesandbox.io/s/confident-breeze-qm4bf?file=/styles.css
EDIT: #Temani and #Daniel below suggested display: flex; which helped nicely.
Here is the codesandbox fork with implemented changes:
https://codesandbox.io/s/suspicious-wescoff-wgyny?file=/styles.css
Thank you lads.
body {
font-family: "Arial Light";
background-color: #1e1e1e;
padding-top: 60px;
}
.stepper-hor {
background-color: #252525;
display: flex;
flex-direction: column;
/* width: 350px; */
/* HERE YOU CAN CHANGE THE WIDTH OF THE CONTAINER */
}
.step-container {
border: 1px solid rgba(255, 255, 0, 0.459);
min-height: 63px;
margin: 0;
}
.step-circle-default {
display: inline-block;
height: 21px;
width: 21px;
background-color: #666666;
color: #333333;
font-size: 0.65rem;
font-weight: bold;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
line-height: 21px;
margin-right: 9px;
}
.step-circle-active {
display: inline-block;
height: 21px;
width: 21px;
background-color: #d85603;
color: #ffffff;
font-size: 0.65rem;
font-weight: bold;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
line-height: 21px;
margin-right: 9px;
}
.step-additional-label {
border: 1px solid rgba(0, 128, 0, 0.575);
display: inline-block;
min-width: 26px;
font-size: 0.59rem;
color: #666666;
padding-right: 21px;
}
.step-text {
border: 1px solid rgba(0, 0, 255, 0.404);
display: inline-block;
overflow-wrap: break-word;
font-size: 0.82rem;
color: #ffffff;
position: relative;
min-height: 54px;
top: 4px;
}
.step-line {
border: 1px solid #444444;
}
<div class="stepper-hor">
<p class="step-container" }>
<span class="step-circle-default">1</span>
<span class="step-additional-label">100%</span>
<span class="step-text">Take a shower</span>
</p>
<p class="step-container" }>
<span class="step-circle-default">2</span>
<span class="step-additional-label">10%</span>
<span class="step-text">Read a book</span>
</p>
<p class="step-container" }>
<span class="step-circle-active">13</span>
<span class="step-additional-label">79%</span>
<span class="step-text">
Do some activity with long description that will require more space
</span>
</p>
</div>
You should change your step-container structure and use display: flex in order to achieve the result you want.
Here is an example:
HTML
<div class="step-container">
<div class="stats">
<span class="step-circle-active">13</span>
<span class="step-additional-label">79%</span>
</div>
<p class="step-text">
Do some activity with long description that will require more space
</p>
</div>
CSS
.step-container {
display: flex;
}
.step-container .stats {
display: flex;
}
There is no point in creating the step-container as a p element with multiple spans in it.
Adding CSS property display: flex; to the container .step-container will do the thing.
I recently created a website and after I created a button with a <a> on it, the text kept aligning it self to the bottom of the text.
How do i make the text align to the center horizontally.
I have tried adding this code: "display:table-cell; vertical-align:middle;" to the button's CSS, and I have tried changing the position with these code snippets: "relative, fixed, static etc." But none of them changed the horizontal position of the text.
.button {
background-color: #171717;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 30px;
height: 10px;
}
a {
text-decoration: none;
font-family: bebasNeue;
font-size: 20px;
vertical-align: center;
text-align: center;
}
<center>
<button class="button">Buy Now!</button>
</center>
As commented, do not use <center> but text-align or display:flex/grid/table behavior and margin. Also a clickable element is not made to hold another clikable element. Use <button> or <a> . button is a form element and could be tricky to restyle.
example of what you could do :
.button {
/* what seems to trouble you */
padding: 15px 32px;
font-size: 20px;
/* okay so far, but height is half of font-size !! */
height: 10px;
/*Your reset*/
background-color: #171717;
border: none;
color: white;
font-size: 16px;
border-radius: 30px;
text-decoration: none;
/* Now try the layout reset and use flex behavior */
display: inline-flex;
align-items: center;
/* ==> because items too big will overflow from the container */
}
a {
box-sizing: border-box;
}
body {
text-align: center
}
<button class="button">Test me! (form element) </button>
Test me! (hyperlink)
How about adding style="position:absolute" in the button tag?
The problem appears to be – quite apart from the use of obsolete and invalid HTML – that you've defined a height of 10px, with a font-size of 16px and padding of 15px (top and bottom). That sum doesn't add up, the height would require:
16px + 2*(15px) = 46px
to contain the text in the centre. To center the text, though I'm replacing the <a> with a <span> for the purposes of validity, you could simply remove the height declaration:
.button {
background-color: #171717;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 30px;
}
span {
text-decoration: none;
font-family: bebasNeue;
font-size: 20px;
vertical-align: center;
text-align: center;
}
<div class="centered">
<button class="button"><span>Buy Now!</span></button>
</div>
Regarding https://jsfiddle.net/postiffm/74cxr092/
> <div id="Tagline">
> I'm in the center.
> <div id="TaglineLeft"></div>
> <div id="TaglineRight">I am a phone #</div> </div>
How can I align the text in the TaglineRight so it has some space above it like the text in the center section? I've tried some padding and margin stuff, but nothing seems to work.
Thanks.
add line-height:30px; to #TaglineRight a
#TaglineLeft, #TaglineRight {
position: absolute;
color: white;
font-weight: normal;
text-align: center;
height: 100%;
width: 30%;
top: 0;
border-radius: 7px;
height: 20px;
padding: 5px;
}
you may add height: 20px; and padding: 5px; to #TaglineLeft, #TaglineRight { class
an old fashion way is to treat the child element as an table data by set it to display: table-cell, vertical-align: middle; & set it's parent to display: table;.
in that way you can change the height of the parent to whatever/whenever you like to and the child element will always stay vertical aligned. not like CSS3 solutions, it will work in old browsers too and cross browser support of course.
https://jsfiddle.net/ryf0w7rp/ - try to change the "#Tagline" element's height from 20px to other value and see the result.
*if you don't want main wrapper elements to use display: table so you can create another level of element to use display: table.
*for the example i made the solution just for the "#TaglineRight" element which has an inner <a> element. to make the other elements work the same, add the same structure and set the CSS to the right elements.
Instead of playing around with position:absolute/relative.
Consider using display:flex
check this solution
#Tagline {
color: white;
font-weight: normal;
letter-spacing: 2px;
text-align: center;
margin-bottom: 10px;
border: 0 solid #ff9706;
border-radius: 7px;
background-color: #ff9706;
display: flex;
height:30px;
line-height: 30px;
justify-content: space-between;
}
#TaglineLeft,
#TaglineRight {
color: white;
height: 100%;
width: 30%;
border-radius: 7px;
text-align: center;
}
#TaglineLeft {
margin-top: 0px;
background-color: #6673aa;
order: -1;
}
#TaglineRight {
border: 0 solid #7e922e;
background-color: #7e922e;
}
#TaglineRight a {
color: white;
letter-spacing: 1px;
text-decoration: none;
}
<div id="Tagline">
I'm in the center.
<div id="TaglineLeft">left line</div>
<div id="TaglineRight">I am a phone #
</div>
</div>
Hope it helps
I've this list of buttons
button {
background-color: grey;
color: #fff;
border: none;
border-radius: 2px;
box-shadow: 1px 1px 0 0.8px #C0CBD1;
height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 30px;
font: 500 16px/36px sans-serif;
}
.special {
font-size: 30px;
}
<button>A</button>
<button>B</button>
<button class="special">C</button>
Now what I've done is that the special button has a bigger font-size. The weird thing is that increasing the font-size moves this button up. I guess this is all very logic but cannot find the explanation (which should help me to fix this of course!)
The explanation is that buttons are inline-element, and the text in the button determines the vertical alignment.
The default vertical alignment for inline elements is to place the bottom of characters on the base line of the text. If you look at the buttons in your example, you see that the bottom of the characters line up exactly.
If you add some text around the buttons, you see that the text of the buttons aligns with the text outside the buttons: http://jsfiddle.net/Guffa/q640e8sc/4/
If you specify a different verical alignment for the buttons, they will line up differently. If you for example use vertical-align: middle;, the buttons will line up at the center of the characters, so the edges of the buttons will line up: http://jsfiddle.net/Guffa/q640e8sc/5/
Another way to avoid that alignment is to make the buttons block elements, for example using float: left;. That makes the buttons line up, but it of course make the buttons react differently to surrounding elements: http://jsfiddle.net/Guffa/q640e8sc/6/
Use vertical-align:
button {
background-color: grey;
color: #fff;
border: none;
border-radius: 2px;
box-shadow: 1px 1px 0 0.8px #C0CBD1;
height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 30px;
font: 500 16px/36px sans-serif;
display: inline-block;
vertical-align: top;
}
.special {
font-size: 30px;
display: inline-block;
vertical-align: middle;
}
<button>A</button>
<button>B</button>
<button class="special">C</button>
And to align the text in the middle, you may use line-height.
button {
background-color: grey;
color: #fff;
border: none;
border-radius: 2px;
box-shadow: 1px 1px 0 0.8px #C0CBD1;
height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 30px;
font: 500 16px/36px sans-serif;
display: inline-block;
vertical-align: top;
line-height: 16px;
}
.special {
font-size: 30px;
display: inline-block;
vertical-align: middle;
line-height: 30px;
}
<button>A</button>
<button>B</button>
<button class="special">C</button>
<button>D</button>
<button>E</button>