+ 1

How to align "welcome " in this code without changing its width and height?

link to the code-https://code.sololearn.com/WE7tMFPMkZTs/?ref=app

26th Oct 2017, 4:51 AM
Jitesh Gupta
11 odpowiedzi
+ 6
If you mean verticaly centered, use "display:flex" on 'welcome' container (and related properties to center both verticaly and horizontaly -- so, no need of padding in it, and/or margin on <h1> element } <div style="background-color:black; color :white; width:310px; height:60px; display:flex; align-items:center; justify-content:center;"> <h1>welcome</h1> </div> Anyway, it's not a good habit to use fixed size to fit a particular device display, as it will become unadapted on majority of devices ^^ [edit] Other ways to vertical center: https://code.sololearn.com/WewcrAlN1m8k/?ref=app
26th Oct 2017, 11:48 AM
visph
visph - avatar
+ 6
Flexbox model is a (modern) powerful tool to handle layout in another logic than default html box model (with inline and block types): https://css-tricks.com/snippets/css/a-guide-to-flexbox/
26th Oct 2017, 5:05 PM
visph
visph - avatar
+ 5
Sure it works: I have no doubt about that ;) However, if you want to be really sure that maximum browsers will support it, you need to add prefixed versions of these 'flex' properties (at least '-webkit-' wich is required for old android versions, or some webkit based desktop browsers not up to date ;P
26th Oct 2017, 11:52 AM
visph
visph - avatar
+ 3
<div align="center"...>...</div>
26th Oct 2017, 5:26 AM
👑 Prometheus 🇸🇬
👑 Prometheus 🇸🇬 - avatar
+ 3
is it ok? <style> h1{ margin:0px; padding:0px; } .welcome{ background-color:black; color :white; position:fixed; width:310px; text-align:center; height:40px; } </style> <body> <div class="welcome"> <h1>welcome </h1> </div> </body>
26th Oct 2017, 8:31 AM
Elizabeth🌸
Elizabeth🌸 - avatar
+ 3
in your code,height value you given is 40px. ok i will try.
26th Oct 2017, 8:39 AM
Elizabeth🌸
Elizabeth🌸 - avatar
+ 1
but padding is 20px which is effecting its height, ok np😀
26th Oct 2017, 8:48 AM
Jitesh Gupta
0
not working, please give me codes, edit my code and share here
26th Oct 2017, 6:42 AM
Jitesh Gupta
0
yes ty it worked @visph
26th Oct 2017, 11:49 AM
Jitesh Gupta
0
@visph can you tell me the meaning of flex, means what it can do to a text apart from centering it?
26th Oct 2017, 2:05 PM
Jitesh Gupta
- 1
You did that correctly @Elizabeth , but i need that welcome to be aligned at the middle when the height is 60px
26th Oct 2017, 8:36 AM
Jitesh Gupta