New course! Every coder should learn Generative AI!
Try a free lesson+ 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
11 Answers
+ 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
+ 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/
+ 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
+ 3
<div align="center"...>...</div>
+ 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>
+ 3
in your code,height value you given is 40px.
ok i will try.
+ 1
but padding is 20px which is effecting its height, ok np😀
0
not working, please give me codes, edit my code and share here
0
yes ty it worked @visph
0
@visph can you tell me the meaning of flex, means what it can do to a text apart from centering it?
- 1
You did that correctly @Elizabeth , but i need that welcome to be aligned at the middle when the height is 60px
Often have questions like this?
Learn more efficiently, for free:
Hot today
Bits
4 Votes
How to cast in python : 2
2 Votes
No connection message
0 Votes
Why didn't I get it?
1 Votes
This error is showing.
0 Votes