Having trouble centering text vertically in game grid using flexbox styling

I'm working on creating a tic-tac-toe game, but I'm struggling to get the x and o marks to align properly both vertically and horizontally.

Take a look at my code below. The "marked" values are the ones containing letters:

ul {
  display: flex;
  flex-wrap: wrap;
  width: 456px;
  list-style: none;
  padding-inline-start: 0;
}

li {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
}

li:hover {
  background-color: yellow;
}

figure {
  display: flex;
  justify-content: center;
}

.marked {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10em;
}
<h1>Tic Tac Toe</h1>
<figure class="ttt">
  <ul>
    <li class="marked">o</li>
    <li class="marked">x</li>
    <li class="marked">o</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</figure>

I've experimented with different methods to align the text, including using divs, various properties, values, text types, and display types, but I can't seem to get it right. Here's a sample of what I'm dealing with:

https://i.sstatic.net/K8TT1.png

It appears to be off-center vertically, and while horizontally seems okay, it may still not be pixel-perfect. I've spent hours on this, so any advice would be greatly appreciated!

htmlcssflexboxvertical-alignment

Answer №1

Take a look at this.

I made some changes to the styling by adding text-transform: uppercase for the li elements and slightly decreasing the font-size for the .marked class.

It appears that the issue is arising from aligning UPPERCASE letters while using lowercase.

ul {
  display: flex;
  flex-wrap: wrap;
  width: 456px;
  list-style: none;
  padding-inline-start: 0;
}

li {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
}

li:hover {
  background-color: yellow;
}

figure {
  display: flex;
  justify-content: center;
}

.marked {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 5em;
}
<h1>Tic Tac Toe</h1>
<figure class="ttt">
  <ul>
    <li class="marked">o</li>
    <li class="marked">x</li>
    <li class="marked">o</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</figure>

Answer №2

One way to align text both vertically and horizontally is by setting a line-height on the <li> elements and using text-align: center;.

ul {
  display: flex;
  flex-wrap: wrap;
  width: 456px;
  list-style: none;
  padding-inline-start: 0;
}

li {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  background-color: gray;
  /* HERE */
  text-align: center;
  line-height: 125px;
}

li:hover {
  background-color: yellow;
}

figure {
  display: flex;
  justify-content: center;
}

.marked {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10em;
}
<h1>Tic Tac Toe</h1>
<figure class="ttt">
  <ul>
    <li class="marked">o</li>
    <li class="marked">x</li>
    <li class="marked">o</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</figure>

By using percentage values instead of px, you can ensure your design looks good on various screen sizes. For more information on this topic, you can read this informative article.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure that all of my images are the same size?

I've been working on making my pictures of varying resolutions the same size here, but no matter what I try, it just doesn't seem to work. Here is what I'm getting: . When I change the state to 1, 2, 3, or 4, I want it to look like this: her ...

javascripthtmlcssreactjs

When the open button is clicked, the Div will toggle between open and closed states

Recently, some of my questions have not been well-received, which makes me feel a bit disheartened. It's important to remember to be kind when providing feedback. I've noticed that some people downvote without offering constructive criticism, whi ...

javascriptjqueryhtmlcsspopup

"Embracing the power of dynamic CSS customization within Umbraco

I recently inherited an Umbraco system without much prior knowledge of the platform, and I am currently investigating the site's performance. The branding and styling of the site is currently managed through a "Brand" document type, allowing the site ...

csslessumbracoumbraco7

Retrieve data from TypeScript file (.ts) and use it in an HTML document

Recently I started learning Typescript and HTML as I work on building an Angular2 application. At the moment, I have a TypeScript file that resembles the following structure: import {Http, Headers} from 'angular2/http'; import {Component} from & ...

javascripthtmltypescriptangular

Is there a way to deactivate a button upon clicking and then substitute it with a new button that serves a different purpose in AngularJS?

Is there a way to deactivate a button once clicked and substitute it with another button that performs a different task using AngularJS? Here is the button in question: <button type="submit" class="btn btn-small btn-default" ng-disabled="isteam==0 || ...

javascripthtmlangularjstwitter-bootstrapbutton

Triggering a jQuery click event to showcase the hidden content

I am attempting to replicate the functionality seen on the website. The issue I am facing is related to the event_content class. I want to display only a limited amount of content initially, and then hide the excess content. Upon clicking the plus class, ...

javascriptjqueryhtmlcss

What is the method for incorporating text below font icons?

Having a bit of trouble here with my code snippet featuring 'font awesome' icons in circles. I'm looking to add text beneath each icon, but the alignment within the circle is proving to be a challenge. Check out the code in this link to see ...

htmlcss

Issues with cross-browser compatibility are arising in my jQuery code

Here is the code snippet I'm working with: function toggleLoader( display ){ if( display === 'show' ){ $('.overlay, .loader').css({ 'z-index' : '1000', 'display& ...

javascriptjquerycsscross-browser

Tips for designing the microphone appearance on the Google Chrome speech input interface

Google Chrome features an input control for speech recognition. If you want to know how to use it, check out this link. I'm looking to enlarge the microphone icon and possibly use a customized image for it. Increasing the width and height of the inp ...

javascripthtmlcssgoogle-chromestyles

What steps can I take to stop text from disappearing when the screen size decreases and the span is used?

I'm currently using Bootstrap 5 to create a form. On a computer screen, my file input element looks like this: https://i.sstatic.net/fX6Kx.png However, on mobile devices, it appears like this: https://i.sstatic.net/ilUZ9.png Below is the code sni ...

htmlcssbootstrap-5

I'm having trouble pinpointing the issue in my code

For some reason, the first button in the div in this code is not working on HTML files. I have tried multiple JavaScript and HTML validators but none of them seem to work. Surprisingly, it works fine on codecademy.com and w3schools.com, but the issue persi ...

javascripthtml

Adjust jQuery UI's resize functionality to maintain the current total width

I arranged two containers horizontally using the position: absolute property. I am attempting to create a "resize bar" in the center that, when dragged, will expand one container while shrinking the other (thus maintaining the overall width). <div clas ...

jqueryhtmlcssjquery-uiresize

What to do when the image-sprite is too large for the container and needs to be resized to fit within a smaller

Is there a way to resize the sprite image to fit the container without using the tag? The sprite image dimensions are 562px (x5) width x 562px height main-desktop.png .container_outer{ height:200px; width:100%; } .chrome-part, .ie-part, .firefox- ...

htmlcssbackground-imagecss-sprites

Tips for creating a gap between the <label> element and a form field

I have read through the answers provided, but nothing seems to work for me. My goal is to place a label and 2 small form fields on the same line, with about 90px of space between the label and the fields. I am aiming for a layout similar to the image shown ...

htmlcssformslabel

Retrieve the Query String Information from a Link and Generate a New Link in Another List

I am looking to extract information from a link in #list and then use that information to create a new link in #list3. The link I have is http://jsfiddle.net/4y5V6/24/. Is there a way to set it up so that when a link is clicked, it automatically gets added ...

javascriptjqueryhtml

JavaScript Empty Input Field when Duplicating Node

I am seeking advice on how to clear the textboxes when an HTML form is cleared. The following JS code runs onclick: var counter = 0; function moreField() { counter++; var newFields = document.getElementById('readroot').cloneN ...

javascripthtmlvisual-studioclone

PHP unable to retrieve ID from URL

Is there a way to extract an id from the URL when clicking a button for the purpose of deleting an item from a session? I have tried using $_GET but it doesn't seem to work. <form action="Shop.php?id= <?php echo $values["ProductCode"]; ?>" m ...

phphtml

Utilize Vue.js to sort by price bracket and category

Hello, I am currently new to working with Vue.js and I am attempting to create two filters - one for price range and the other for genre. Any guidance or assistance would be greatly appreciated. Below is a snippet of my code: ul class="filter-wrapper"&g ...

javascripthtmlcssvue.js

Learning the ins and outs of HTML5 and CSS3

Does anyone have recommendations for high-quality HTML5 and CSS3 tutorials? ...

htmlcss

What is the best way to interpret a line break within a string variable in TypeScript?

Realtime Data base contains data with \n to indicate a new paragraph. However, when this data is retrieved and stored in a String variable, the website fails to interpret the \n as a paragraph break: https://i.stack.imgur.com/tKcjf.png This is ...

htmlreactjstypescript