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;
}
Related
I'm fairly new to coding. I was making a JS project when I encountered a problem. I need to vertically align 2 parent divs. Those 2 parent divs have several divs underneath them. So, in order to vertically align the whole page, I need to style those parent divs. Please help me in doing so. If you know the solution to my problem, please teach me how to move my divs along the way.
Here's the CSS Code. (If you want to see the JS and HTML code, here's the js fiddle link: https://jsfiddle.net/y924rv7g/)
body {
background-image: url(Background.jpeg)
}
/* AGE IN DAYS */
.container-1, .container-2 {
border: 1px solid;
margin: 0 auto;
text-align: center;
width: 75%;
}
.flex-box-container-1, .flex-box-container-2 {
display: flex;
padding: 10px;
border: 1px solid black;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}
.flex-box-container-1 div {
padding: 10px;
align-items: center;
display: flex;
}
#flex-box-result {
font-size: 32px;
font-weight: bold;
}
#yikes {
font-size: 32px;
font-weight: bold;
Animation-name: example;
Animation-duration: 0.5s;
animation-iteration-count: infinite;;
}
#keyframes example {
10% {color: red;}
15% {color: yellow;}
20% {color: blue;}
30% {color: green;}
40% {color: lightsalmon;}
50% {color: lightsteelblue}
60% {color: steelblue}
70% {color: ivory}
80% {color: purple}
90% {color: pink}
100% {color: magenta;}
}
.flex-box-container-2 img {
box-shadow: -12px 11px 28px 6px rgba(0,0,0,0.69);
margin: 10px;
}
When posting a question to Stack Overflow, please try to keep the sample code as minimal as possible, so we can concentrate only on the necessary parts :) Not sure what exactly are you trying to do - what and how do you expect to have aligned? For one dimensional styling have a look at flexbox, for 2D grid. I'd recommend you to go through one of those links (probably flexbox in your case) and read them thoroughly, your answer is most likely there :)
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:
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/
I have the code:
<div>C</div><div>A</div>
div{
border: 4px solid Brown;
display: inline;
}
http://jsfiddle.net/TKQzT/
So I end up with two rectangles with letters in them.
I was wanting them to display as squares instead. So currently they're rectangles taller than they are wide.
Does anyone know how to style them so they'll come out as perfect squares?
You'll have to set the display to inline-block, so that you can specify an explicit width and height:
div {
display: inline-block;
width: 1.25em;
height: 1.25em;
line-height: 1.25em;
}
Here's the fiddle: http://jsfiddle.net/TKQzT/13/
As letters are higher than wider, you'll have to set the with/height of the box manually.
It's not going to be exact without giving them an equal width and height, but try:
div {
border: 4px solid Brown;
display: inline;
padding:2px 5px;
margin:1px
}
and if you're using inline just so you can line up the div's side by side then I recommend using float and having the div's not inline. This way you can give them a explicit width and height.
div {
border: 4px solid Brown;
padding:2px 5px;
margin:1px;
float:left
}
See demo here: http://jsbin.com/ojumay/edit#html,live
The better way i know to do it is to fix height and width, while using inline-block display to be able to do it.
Try this :
div{
display: inline-block;
height: 1em;
width: 1em;
border: 4px solid Brown;
line-height: 1em;
text-align:center
}