I'm working on a small tic tac toe game and i have a problem aligning vertically the content of my TDs. As you can see in the following screenshot i apply the vertical-align property to the selected TD but the text is still not centered vertically and remains slightly below the center of the square.
How can i align the content of the TDs properly?
I uploaded the source files in this folder in case they are needed.
Thanks in advance
I attach the relevant code as suggested by the user Maik Lowrey.
HTML
<div class="row"><div class="column d-flex justify-content-center">
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</div></div>
JS
let cells = document.querySelectorAll("td");
cells[selected_cell].innerText=event.key;
This is what i get now, the structure of the grid has changed but the letter is still not aligned vertically:
To center any element inside the container, add below css to the container
.container{
display: flex;
justify-content: center;
align-items: center;
}
Simply you can use verticle-align:middle to table.. it can solve your problem
A way for centering elements is to use text-align: center for aligned horizontally. Also set line-height equal with height of the element for aligned vertically.
Example:
.container {
height: 85px;
width: 85px;
line-height: 85px;
background-color: black;
color: white;
text-align: center;
}
<div class="container">1
</div>
See: https://www.sitepoint.com/atoz-css-quick-tip-vertical/
Related
I currently have parallelogram that was created with a div and the css property clip-path. This shape is stake to the stop and bottom of the screen with a dynamic width as well. I'm trying to figure out how to horizontally (not vertically) center the content.
My issue is that any text that I try to center seems to center to the rectangle, not the parallelogram that I have created.
So far I've tried to use left and right padding, percentage based margins, and clip paths of the content within the div to no avail.
I've attached a codepen with where I'm at so far. Any help would be greatly appreciated.
You need to add
text-algin-center;
to your
.sidebar-callout-padding and
display:inline-block;
to your paragraphs (give them an unique ID)
#wrapper {
background-color: yellow;
text-align: center;
}
#yourdiv {
background-color: green;
display: inline-block;
}
<div id="wrapper">
<div id="yourdiv">Your text</div>
</div>
I'm trying to implement tiles for prices including div container, image and caption. The problem is that images are of different sizes (and shouldn't be resized) so I cannot get everything aligned
Tried to add vertical-align to image (baseline) and caption (top) but the tiles are still not aligned in this case. Here is the example:
Tiles are not aligned
html:
<div class="container">
<div class="tile-topup tile-blue">
<img src="coin-1.png">
<h4>1$</h4>
</div>
<div class="tile-topup tile-green">
<img src="coin-2.png">
<h4>2$</h4>
</div>
<div class="tile-topup tile-purple">
<img src="coin-3.png">
<h4>3$</h4>
</div>
<div class="tile-topup tile-red">
<img src="coin-4.png">
<h4>4$</h4>
</div>
</div>
css:
.tile-topup {
display: inline-block;
width: 10em;
height: 10em;
padding: 1em;
margin: 0.2em;
text-align: center;
background-color: #ccc;
}
Images, text and tiles should ve vertically aligned. Any ideas?
display: block;
margin-right: auto;
margin-left: auto;
Change 'display: inline-block' to 'display: block'
This will make it so that every image starts out on a new line beneath the previous one.
Then set 'margin-left: auto' and 'margin-right: auto'
This adds enough margin on either side of the boxes to centre your images.
Use these classes for the tile-topup.
- d-flex
- flex-column
- align-items-center
Doing so, the img and h4 are aligned horizontally in the center. use justify-content-center Should you want to align them vertically in the center too. Moreover, you need to remove the display property of the tile-topup selector since you use d-flex. If you do not want to resize the images, remove the height and width too.
You may use d-flex for the container too.
I have 3 divs like so:
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
with the following CSS:
div {
border: 1px solid black;
display: inline-block;
height: 100px;
width: 100px;
}
When the divs are empty, this code works fine. All divs align along the same horizontal plane. But! When I put any content in 1 or 2 divs, the divs with the content move down about 90% of the height:
<div class="div1">X</div>
<div class="div2">Y</div>
<div class="div3"></div>
Divs 1 and 2 are now spaced down in comparison to the normally aligned div 3. The plot really thickens when I add content to the final div:
<div class="div1">X</div>
<div class="div2">Y</div>
<div class="div3">Z</div>
Now all three divs are properly aligned at page top again. Not sure what's happening here or the proper work around?
This is happening because the default vertical-align for a inline block element is baseline*.
This image from CSS Tricks helps to demonstrate the baseline of text:
As you can see, the baseline isn't how far down the text goes, it is the line that the text is aligned on. With vertical-align:baseline, the div with no content aligns with the baseline created by the <div>'s with content.
This image may help you visualize what's happening(or, you can play with the jsfiddle):
To make all your <div>'s align, no matter the content, set vertical-align:top;:
div {
border: 1px solid black;
display: inline-block;
height: 100px;
width: 100px;
vertical-align:top;
}
This article also helps explain vertical-align some more
* W3 Specs
Yes, obviously I'm doing it wrong. Why can't it be as easy as horizontally aligning stuff? I sit and my work is halted for hours on end trying to look up how to vertically align in the middle, so I don't have to bug you guys with my stupid most-likely really easy to you question.
Display Block or Table-Cell, everything I read never works. I thought "maybe if I horizontally align my img with .divID img and then vertically align the div itself" sadly, I wish that'd work. But even when I did try centering the div vertically in the middle, it messed up the image centering and didn't even work.
TL;DR: I hate trying to vertically align stuff so much.
I'm trying to get my header image centered vertically and horizontally. This my code I'm working off.
HTML
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="http://i.imgur.com/d0umnxt.png" />
</div>
</div>
</div>
CSS
body {
margin: 0px;
}
#header {
width: 100%;
height: 100px;
background-color: #151B1F;
}
#logo {
display: block;
margin: auto;
}
I hate table and table-cell just as much as the next guy, but when you know the height of the parent element (#header in your case), things become really easy.
Here's a working fiddle.
You just need to add the following styles to your CSS:
#header {
display: table;
}
#logo {
display: table-cell;
vertical-align: middle;
text-align: center;
}
I am implementing a carousel with images. The carousel is 960px wide, and contains 5 images in containers of width 960px/5 = 192px (and height 119px).
I want the images to be as large as possible inside their containers, without changing the aspect ratio of the images. I also want the images to be centered both horizontally and vertically within their container.
By hacking around for hours, and using the center tag, I have managed to construct what I describe above. Please see a fiddle here.
The problem is with the container of the second image (as shown by the black border). While the second image is centered horizontally, the container is shifted down a little.
I'm trying to implement an overlay on the images, and need the containers to all be at the same height. How can I have the containers all at the same height? Is there a better/cleaner approach that does not use the center tag?
You could add vertical-align:top; to your #carousel-images .image{} css
Or middle or bottom...
Uh? Why did I get downvoted on this?
http://jsfiddle.net/y2KV7/
I got it to work by doing the following:
HTML:
<div id="wrapper">
<div id="carousel-images">
<img src="http://eurosensus.org/img/initiatives-300/30kmh.png" />
<img src="http://eurosensus.org/img/initiatives-300/affordableEnergy.png"/>
<img src="http://eurosensus.org/img/initiatives-300/basicIncome.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/ecocide.jpg"/>
<img src="http://eurosensus.org/img/initiatives-300/educationTrust.jpg"/>
</div>
</div>
CSS:
#wrapper
{
width: 100%;
text-align: center;
background: blue;
}
#carousel-images
{
width: 960px;
white-space: nowrap;
font-size: 0;
margin: 0 auto;
}
#carousel-images img
{
display: inline;
max-width: 192px;
max-height: 119px;
border: 1px solid black;
vertical-align: middle;
}
Click here to view working jsFiddle demo
First, don't make the world come back to 10 years ago. do not use tag for formating. I would also suggest you to get some reading about different between div and span as well as display attribute. you could easily find information on http://www.w3schools.com.
if you want a center container. you could use css margin auto trick.
like margin:5px auto; would center the container horizontally.