How to text-align a label in css

Question

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!

Answer 1

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 class="fname" for="fname">First Name</label>
<input type="text" placeholder="Enter First Name" name="fname" id="fname" >
<label class="lname" for="lname">Last Name</label>
<input type="text" placeholder="Enter Last Name" name="lname" id="lname" required>
<label class="test" for="test">Test</label>
<input type="text" placeholder="Enter Test" name="test" id="test" required>

I think what you want is the middle one

========%%%%=======%%%%=========

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 class="fname" for="fname">First Name</label>
<input type="text" placeholder="Enter First Name" name="fname" id="fname" >

Answer 2

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