The information world in any approximation is represented by elements and systems of elements, words and texts, or in the last formalized instance - texts and tables. You can consider other, already known, data structures, as well as images, but other information forms have a different relation to the issues of using CSS and HTML in terms of text formatting .
The correct structure of the site page involves determining the position of each element. An HTML document is always a sequence of elements, the display of which is directly affected by three basic rules:
- absolute positioning (position) ;
- place in the general flow;
- z-index.
Other placement options also matter, require a lot of knowledge to solve the problem using CSS tools "center text".
Centered and Alignment Rules
CSS rules complement an HTML document, but without rules, the latter can handle any alignment option. The ubiquity of mobile devices and the departure of design towards greater simplicity and "rectangularity" makes the issue of centering relevant, while other alignment often plays out.
The main element of the page is a block described by a specific style. The rule of horizontal alignment: text-align can take, as already happened, only four values ββ(left, center, right, justify). You can perform vertical alignment by combining the values ββof the height and line-height rules:
{
height: 88px; // with this ratio
line-height: 88px; // css centered text - vertically
}
You can experiment with other rules. In the sources there is a mention of the interpretation of the block by the rules display: table, display: table-cell and vertical-align: middle ; but it doesnβt always work.
Aligning text through tables
The only data structure that was destined to be understood first and live forever is a table. It provides both vertical and horizontal alignment, in addition, the question of how to center the text in CSS when using tables ceases to have a complex meaning.
The prevailing practice of using CSS rules to achieve a particular goal in markup does not always satisfy the concept of cascading style sheets. Nothing prevents the developer from centering in any direction by placing content in the center cell of a table of three columns and three rows.
This solution is not standard, but effective. Instead of long and meticulously solving the problem of page cross-browser compatibility or calculating indents on the left, right, etc., it is commonplace to use percentage values ββof cell widths and row heights in tables.
JavaScript Alignment
The question "How to center text in HTML " is elementarily solved by an algorithm in the browser language and has a much more practical and effective performance.
Designing stylesheets has already started flowing, and almost every self-respecting site management system offers the developer sets of styles for all occasions. But life always requires specifics: every time you have to think from scratch, how can this be placed in the center of the text using CSS. An option for alignment purposes in a block "glued" to the side of the page, and therefore changing the size, is hardly suitable for a pop-up menu block, which is built from various elements.
Visible centering is not always just a block in which it is initially known where the left side is and how many pixels are to the right side, where is the top, and there is no guarantee that the bottom is the border against which vertical alignment should be performed.
There is a tendency that style should be determined by content. To a greater extent, sites carry information to the visitor, visual and sound accompaniment is just an addition to the plain text. It is the symbols that carry the desired content (this does not apply to sites on art, paintings, music, etc.) - we are talking about the necessary information for the visitor.
Features for presenting text and HTML
It so happened that the indivisible element of the page content is text, not a word. Semantics is the competence of the developer (site owner). Actually, the text can be represented by more than one tag, that is, a natural sentence can be not just a sequence of characters, but a sequence of tags containing characters. It follows that the CSS itself in the center of the text can only be placed in simple cases.
Issuing a server at the request of a browser is very voluminous and contains many elements that are far from always related to what will be displayed. When designing page layout, it is important to correctly place emphasis on the presentation of information, in particular alignment. Something is better to do on the server, something on the client, that is, in the browser. You should not always rely on CSS rules; focusing on the final result is much more practical.