How to center a single character both vertically and horizontally in a square div


Tags: css

Problem :

I want to center within a square div an arbitrary character. I admit that this sounds like a very simple task, but nothing I've tried works (and I've tried a bazillion things!)1.

For concreteness, let's say that the div has height and width equal to 20ex, and let's say that the single character is the so-called "multiplication sign": ✕, nice and symmetric. I want this character to be positioned inside the 20ex-by-20ex square div such that the point where the two strokes cross is dead-center, both vertically and horizontally, within the div.

EDIT:

I tried the answers I've received so far, here. The solutions given by Jedidiah and by Ashok Kumar Gupta (second and third divs) produce pretty similar results, but (maybe I'm seeing things), the ✕ in the third div is just a hair above the vertical center.


1I have learned that no matter how mind-numbingly straightforward a layout task may appear, it can still take me hours and hours and hours to figure out the CSS to achieve it.



Solution :

Setting the line-height to the height of the container should do it.

text-align: center;
line-height:20px;
width:20px;
height:20px;

Example here: http://codepen.io/Jedidiah/pen/rLfHz


    CSS Howto..

    How to keep the HTML element aligned when clicked/focused?

    How do I lock a sidebar to the height of a window even when a user scrolls?

    How can I block clicks and Java Script in a HTML

    How to access files from this hierarchy?

    How can I zoom this gallery without moving the other pictures?

    How to create spoiler text?

    How to remove jquery mobile button color or override button css?

    how to make minified and readable css file in sublime text?

    How to prevent from loading a css and a js sheet at only one Rails controller?

    How to get the first parent that has a certain CSS property using jQuery?

    ABBR tooltip CSS styling: How to suppress original tooltip, add rounded corners? [duplicate]

    How can I make my form field have a background image?

    How to hide overflow on slideshow without hiding arrows?

    How to dynamically positioning html table by using css properties?

    How to add multiple css rules to minimize browser reflows?

    How does a GPL license restrict commercial web applications? [closed]

    How to use CSS Class and ID selectors

    How to animate my header to slide in horizontally from left to page view on load?

    How to position div which contains font-awesome icons to centre of another div?

    How to check image is visible (Webdriver)

    CSS how do I define the height between multiple label and textboxes elements

    How to set select box height in jquery moblie?

    How do you make a filter for images that have tags?

    How to use anchor links to scroll within a div without scrolling the main page

    How to see the style of the thumb of range input in Chrome developer tools?

    How do I draw a line in CSS that starts wide and ends in a point [duplicate]

    How to stick to bottom on layout by using CSS?

    How to keep grid width if colums are switched in column menu

    How can I make my username div expand its width depending on the length of the username?

    CSS How To: Easily make all rules check for 1 ancestor