+ 10

How to center(both vertically and horizontally) a word on a webpage by HTML and CSS?

13th Jan 2019, 9:33 AM
DIPTIRANI SAHU
9 odpowiedzi
+ 9
Diptirani Sahu Hi,you can use CSS with flexbox :-) Look at this code how it's centered. https://code.sololearn.com/WZXhL784YaaD/?ref=app Edit: I found simpler centered code for better understanding https://code.sololearn.com/WB1Vf8er8N7T/?ref=app
13th Jan 2019, 9:52 AM
r8w9
r8w9 - avatar
+ 4
Adarsh.n. Bidari I was talking about a word... But your answer is true for a div right?
14th Jan 2019, 5:58 AM
DIPTIRANI SAHU
+ 3
align is deprecated in HTML5 https://www.w3schools.com/tags/att_div_align.asp yes, HTML provides the structure of a web document inline styles still play a part in the cascade, so it's technically still CSS, but yes, it's better to separate into its own file in most cases or in a separate style section in the same file for shorter/simpler documents
16th Jan 2019, 2:39 AM
Janning⭐
Janning⭐ - avatar
+ 2
Centering effectively depends on the attributes the element accepts and the attributes of their surrounding (parent & sibling) elements. Here's a question tree: https://css-tricks.com/centering-css-complete-guide/
14th Jan 2019, 8:22 AM
Janning⭐
Janning⭐ - avatar
+ 1
position: relative; margin:auto; left:0; right:0; top:0; bottom:0; add this to any of your element it will be centered perfectly !
13th Jan 2019, 2:18 PM
Adarsh.n. Bidari
Adarsh.n. Bidari - avatar
+ 1
You can use <center> tag
13th Jan 2019, 8:21 PM
Андрей
Андрей - avatar
+ 1
Diptirani Sahu it is applicable to all elements including div.
14th Jan 2019, 6:16 AM
Adarsh.n. Bidari
Adarsh.n. Bidari - avatar
0
This simple solution also works: https://code.sololearn.com/Wj89ATwZb9Mt/?ref=app I learned it here: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ --- EDIT: This is the CSS: #word { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } Explanation: top 50% and left 50% set the position of the element to half the page size. Because the position is set in relation to the top left of the element, transform: translate(-50%, -50%) is used to move the element up and left by half of its size, centering it perfectly on the page.
13th Jan 2019, 3:07 PM
Lennart Wisbar
Lennart Wisbar - avatar
0
welp, i destroyed my own post without noticing it was in edit mode... haha but to summarise what i said: use: align=“center” (“left” or “right”) or use CSS for aligning text or elements since html is a structure of a website while CSS is used for designing web giving it a morw presentable look.
15th Jan 2019, 9:28 PM
Dingo
Dingo - avatar