How would I make the table-cell 100% width of the parent.
It works perfectly fine when the text is long enough to reach the full width of the element but when the text is not it doesn't want to center whilst using table-cell and vertical-align: middle;
Here is a fiddle:
https://jsfiddle.net/DTcHh/7471/
Update:
Here's a better solution using a flex-box:
jsFiddle
h4 {
height: 50px;
font-size: 1em;
width: 100%;
font-style: oblique;
color: #FFF;
text-align: center;
margin-left: 5px;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I'm trying to show a text inside a circle and I found the following code.
The problem is that I would like:
the circle aligned horizontally in the center of the page
the text aligned vertically in the middle of the circle
JsFiddle here
code:
.fancy {
/* Within a circle, centered text looks prettier. */
text-align: center;
/* Let's avoid our text touching the border. As
our text will still flow in a square, it looks
nicer that way, giving the feeling that it's a "real"
circle. */
padding: 1em;
/* The border will make the circle visible.
You could also use a background, as
backgrounds are clipped by border radius */
border: 0.5em solid black;
/* Let's make sure we have a square.
If it's not a square, we'll get an
ellipsis rather than a circle ;) */
width: 8em;
height: 8em;
/* and let's turn the square into a circle */
border-radius: 100%;
vertical-align: middle;
}
<div class="fancy">something</div>
You can use a flexbox to center the circle, and the text inside:
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
height: 100vh; /* so the body would fill the height */
}
.fancy {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 1em;
border: 0.5em solid black;
width: 8em;
height: 8em;
border-radius: 100%;
vertical-align: middle;
justify-content: center;
}
<div class="fancy">something</div>
If you want to center the element without styling the body, you can use absolute positoning and transform:
.fancy {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 1em;
border: 0.5em solid black;
width: 8em;
height: 8em;
border-radius: 100%;
vertical-align: middle;
justify-content: center;
}
<div class="fancy">something</div>
You can use line-height to where line-height will be equal to the full height to center it
.fancy {
/* Within a circle, centered text looks prettier. */
text-align: center;
line-height: 8em;
/* Let's avoid our text touching the border. As
our text will still flow in a square, it looks
nicer that way, giving the feeling that it's a "real"
circle. */
padding: 1em;
/* The border will make the circle visible.
You could also use a background, as
backgrounds are clipped by border radius */
border: 0.5em solid black;
/* Let's make sure we have a square.
If it's not a square, we'll get an
ellipsis rather than a circle ;) */
width: 8em;
height: 8em;
/* and let's turn the square into a circle */
border-radius: 100%;
vertical-align: middle;
}
<div class="fancy">something</div>
I am using icoMoon fonts (https://icomoon.io/) and centre aligning horizontally and vertically inside circle. Its looking in centre in 100% and 80% of browser but when < 80% the icon is not aligning properly. Simliar case, with > 100% of browser(chrome);
Attaching screenshots:-
.uniIcon {
height: 18px;
width: 18px;
line-height: 18px;
border-radius: 100%;
text-align: center;
float: left;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.iconmoon-icon-files {
font-size: 12px;
color: #FFF;
vertical-align: sub;
padding-left: 1px;
}
<div class="uniIcon" style="background-color: #161620;"><i class="iconmoon-icon-files"></i></div>
Try setting line height for icons to align them in div center, something like
.iconmoon-icon-files {
font-size: 12px;
color: #FFF;
line-height:inherit;
}
Inherit will make line-height of icon take on the height of its containing div.
How do I align images inside a nav tag and push them to the edges of the nav element?
From what I've found researching I am trying to use vertical-align: middle and float but they have no effect on displaying the elements.
Codepen: https://codepen.io/centem/pen/BaajLZm
#company-name {
float: left;
vertical-align: middle;
}
.logo {
float: right;
vertical-align: middle;
}
img {
height: 40px;
vertical-align: middle;
}
you don't need vertical-align. The "nav" element have "display: flex;".
so set "align-items: center;" into css of "nav" element.
nav {
font-family: monospace;
width: 100%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
background: rgb(67, 66, 66);}
In have a js-fiddel here - https://jsfiddle.net/zhfs7hxq/
Very simple I have text within a div with text within a span within that div.
I need to vertically center the the span of text against the larger text within the div.
vertical-align: middle; moves it slightly but doesn't center it.
*{
font-family: sans-serif;
}
.name{
background: yellow;
font-size: 40px;
font-weight: bold;
}
.name-inner{
display: inline;
font-size: 20px;
vertical-align: middle;
}
In your code is vertical aligned by the line-height, that's how it works. If you need to center perfectly you can position absolute the element. I modify your fiddle to achieve it:
https://jsfiddle.net/zhfs7hxq/1/
In the first yellow block targets your code.
My modifications is in the second yellow block:
.name{
margin: 10px;
position:relative;
background: yellow;
font-size: 40px;
font-weight: bold;
}
.name.other .name-inner{
position: absolute;
display:inline-block;
font-size: 20px;
top: 50%;
transform: translateY(-50%);
}
Good luck
If you can use flex box, try this JSFIDDLE: https://jsfiddle.net/zhfs7hxq/2/
Note that vertical-align works only on table-cell and inline-level elements.
Flex box solution
Add this to .name to set its display to flex:
.name {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
}
And to .name-inner add the following to align vertically centered:
.name-inner {
-webkit-align-self: center;
-moz-align-self: center;
-ms-align-self: center;
align-self: center;
}
There's a line-height for your code. Try making the line-heights identical:
line-height: 45px;
Snippet
*{
font-family: sans-serif;
}
.name{
background: yellow;
font-size: 40px;
font-weight: bold;
line-height: 40px;
}
.name-inner{
font-size: 20px;
vertical-align: middle;
line-height: 45px;
}
<div class="name">Heading one <span class="name-inner">Heading insert</span></div>
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;
}