How to text-align a label in css-CodePudding

I want to apply some css styling on my labels for my web page but have no idea how to make it work. At first, I thought I could type label{text-align: center} but it's not giving my any styling at all. What should I type to style my labels? This is my code:

<label for="fname"><b>First Name</b></label>
<input type="text" placeholder="Enter First Name" name="fname" id="fname" required>

Thanks in advance everyone!

CodePudding user response：

Ok, text-align:center didn't work because basically the label elements are inline

inline elements are elements who their display is set to inline , explicitly or by default

these elements won't accept any width or height and only get ENOUGH width and height for their content they even don't accept vertical margins...

so your label here is as small as it's content and there is no room to change your text's alignment... you can change it's display to make it's text centered

Here You can see what I said, I've added another label and changed it's display and colored the labels so you can see diffrence

<style>
     label{
         background: khaki;
     }
    .lname{
        display:block;
        text-align:center;
     }
     .test{
         display: block;
     }
</style>
<label  for="fname">First Name</label>
<input type="text" placeholder="Enter First Name" name="fname" id="fname" >
<label  for="lname">Last Name</label>
<input type="text" placeholder="Enter Last Name" name="lname" id="lname" required>
<label  for="test">Test</label>
<input type="text" placeholder="Enter Test" name="test" id="test" required>

Ok Based On Your comment and image it's not label who you want to center, it's your input

<style>
     input{
        display:block;
        text-align:center;
         width: 100%;
     }
     input::placeholder{
         text-align: center;
     }
</style>
<label  for="fname">First Name</label>
<input type="text" placeholder="Enter First Name" name="fname" id="fname" >

CodePudding user response：

input {
    width: 100%;
    text-align: center;
}