This question already has answers here:
Vertically align text next to an image?
(26 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 4 years ago.
If you click on my header (jsfiddle below), a new div will slide down with text in it, and if you click the close button, it will close. My problem is that the header and the close button are not on the same line or there is unwanted or unequal space between the borders and the element(s). (maybe because they do not have the same font size?)
jsfiddle: https://jsfiddle.net/0hgo69s1/
Chrome Inspector: https://prnt.sc/mob4t7
.con {
width: 40%;
color: black;
border: 1px solid black;
transition: ease all 0.2s;
}
.con:hover {
border: 1px solid limegreen;
}
.header,
.close {
display: inline-block;
text-align: center;
cursor: pointer;
}
.header {
width: 90%;
color: black;
font-size: 14px;
text-transform: uppercase;
font-family: 'Open Sans';
}
.close {
width: 10%;
color: black;
font-size: 18px;
font-family: 'Open Sans';
}
.close:hover {
color: red;
}
<div class="con"><!--
--><div onclick='alert("open")' class="header">HEADER</div><!--
--><div onclick='alert("close")' class="close">×</div><!--
--></div>
In order to vertically center them i tried:
using flex display, and setting line height,
adding margin and padding to equalize the distance
setting a specific height to both
The .header and .close divs both have different font sizes (18px) and (14px) respectively. If you use vertical-align: middle on both elements they should match.
Alternatively, using display: flex and align-items: center on the container will achieve the same.
Add this two lines to your .con element
.con {
display: flex;
align-items: center;
}
https://jsfiddle.net/fcqmkxe2/6/
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
I'm kinda lost, because this is weird for me, it's supposed to not have gap between either button or hyperlink tags, because i use display: inline-block. I'm not using margin, and chrome inspector also telling me that there's no margins in-between.
Screenshot: https://i.stack.imgur.com/P7L2w.png
.titlebar {
width: 100%;
height: auto;
background: var(--titlebar-color);
user-select: none;
-webkit-app-region: drag;
}
.titlebar * {
-webkit-app-region: no-drag;
height: 100%;
}
.titlebar a {
all: unset;
display: inline-block;
cursor: default;
padding: 1px 11px;
text-align: center;
font-family: 'Inconsolata', monospace;
background: var(--titlebar-button-color);
}
.titlebar a#titlebar-title {
background: var(--titlebar-button-title-color);
}
I also using normalize.css and skeleton.css.
Codepen: https://codepen.io/mahesha-c-gumelar/pen/jOBJgOK
How can I remove the gap between hyperlink block, any help is appreciated. Thank you.
Write item's html tags without enter or space, Like this:
a {
display: inline-block;
width: 100px;
height: 40px;
background: gray;
color: #fff;
text-align: center;
line-height: 40px;
}
<div class="test">
123
</div>
You can write font-size: 0 on the parent element, but set it back on the a tag
enter image description here
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
I would need to get rid of the space below the two span tags and don't understand what causes them to be there.
HTML
<div>
<span></span><span></span>
</div>
CSS
div {
border: 1px solid gray;
display: inline-block;
}
span {
width: 13px;
height: 25px;
display: inline-block;
}
span:not(:last-child) {
border-right: 1px solid gray;
}
Screenshot:
https://jsfiddle.net/wjy5hxnu/
You can check the updated jsfiddle here.
div {
font-size: 0px;
}
Adding font-size: 0 to div will solve the problem and if you have to use any text inside span you can add font-size directly in the span.
div {
border: 1px solid gray;
display: inline-block;
line-height: 11px;
}
Line height will lower the div to meet the line.
This question already has answers here:
Centering in CSS Grid
(9 answers)
Closed 4 years ago.
I would like to create a grid of squares with their content centered:
#all {
display: grid;
grid-template-rows: 200px;
grid-template-columns: 200px 20px 200px;
}
.disp {
background-color: black;
color: white;
border-color: gray;
border-width: 10px;
border-style: solid;
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800');
font-family: 'Open Sans', sans-serif;
font-size: 120px;
font-weight: bolder;
padding: 0 20px 0 20px;
align-self: center;
justify-self: stretch;
}
<div id="all">
<span class="disp hour">9</span><span class="sep"> </span><span class="disp min">27</span>
</div>
I cannot make the 9 centered and preserve the 200px width at the same time. Replacing the last CSS line with justify-self: center; does center the 9, but also reduces the width of the cell to make it fit. The width of the grid is preserved.
How to say "center and expand to the width of the cell" in CSS Grid?
All you need is text-align:center
Add this in your CSS code:
If you want only 9 centered:
.hour {
text-align:center;
}
If you want both centered:
.disp {
text-align:center;
}
Tested in Chrome Inspect Element.
Same trick works with the .min class too.
Hope this helps.
This will work:
.hour {
text-align:center;
}
Can this be done with icon font and :before?
Aim: a large icon centered in a div with a text label centered below it.
The old way I would do this would be a background image and padding-top to render the image above the div content.
Would prefer to use an icon font. Displaying an icon to the left of the text is easy enough using :before but is it possible to display it above instead?
Thanks.
EDIT: I have no code other than bog standard icon font usage:
.mydiv:before {
content: "\f11c "; /* this is the Unicode for the icon */
font-family: FontAwesome;
margin-right: .2em;
}
this places an icon befor the text. Don't even know if possible to posisiton it above instead.
Could it be something like this?
.mydiv {
font-family: sans-serif;
width: 120px;
padding: 10px 0;
text-align: center;
border: 1px solid #000;
border-radius: 3px;
background: #333;
color: #fff;
}
.mydiv:before {
content: "\f11c ";
font-family: FontAwesome;
display: block;
margin-right: .2em;
text-align: center;
}
http://jsfiddle.net/4W8dg/
This question already has answers here:
Inline elements shifting when made bold on hover
(30 answers)
Closed 6 years ago.
I am using CSS to style some radio buttons as tabs. I would like the "selected" tab's font-weight to be bold. Of course, this causes the size of the tab to increase, as the text takes up more space. I would like to find a way to have the text go from bold to non-bold without the "tab" changing size
Short of setting a fixed width, is there a crafty and clean way of making the text take up the size of bold text without it actually being bold?
The only method I can think of would be to have the bold text exist (causing the text to exist twice in the HTML), but with visibility: hidden.
Markup:
<label class="tab active"><input type="radio" name="someTabs" value="someValueA" />Tab 1</label>
<label class="tab"><input type="radio" name="someTabs" value="someValueB" />Tab 2 (with longer text)</label>
Relevant CSS as it is now:
.tab {
display: block;
font-size: 1.2em;
height: 2em;
line-height: 2em;
margin-right: 1px;
padding: 0 2em;
position: relative;
text-align: center;
float: left;
}
.tab.active,
.tab:hover {
font-weight: bold;
}
.tab input[type=radio] {
display: none;
}
There is also a solution using ghost elements. Simply use the same text with a bold style, which lies underneath the visible ares:
HTML:
<div class="link">
<div class="text">Sample Text</div>
<div class="ghost">Sample Text</div>
</div>
CSS:
.link {
border: 1px #000 solid;
display: inline-block;
}
.link .ghost {
color: transparent;
font-weight: bold;
}
.link .text {
position: absolute;
text-align: center;
}
.link .text:hover {
font-weight: bold;
}
Here is a jsFiddle to check it out!
The only caveat is that the visible text is not centered within the outer div. Maybe someone can pick up from here?!
What about css letter-spacing? The result will be near the desired one:
.tab
{
letter-spacing: 1.5px;
}
.tab.active, .tab:hover
{
letter-spacing: normal;
}
jsfiddle example