How do i center align with css inline-CodePudding

How do i center align with css inline

.h1 {
  text-align: center
}

<html>

<body>
  <h1>Test</h1>
</body>

</html>

How do i center align with css inline

CodePudding user response：

we cannot use . for simple html tag. Rember .is used for classes and # is used for id for accessing it through css.So only mistake you are doing is using (.) with your h1

h1{
text-align:center;
}

CodePudding user response：

you are doing in wrong remove . from .h1 because you have not mention in you h1 tag like <h1 ></h1>

Note

. is used for class selector.
# is used for id selector.
* is used for all element

h1{
  text-align: center;
}

<html>

<body>
  <h1>Test</h1>
</body>

</html>

CodePudding user response：

Problem is that in CSS you are calling Header element ( h1 ) like it's an class ( using . ). When you want to style elements that don't have any class or id, call it with the actual element name.

See for reference: https://www.w3schools.com/css/css_selectors.asp

Like this:

h1 {
  text-align: center;
}

<body>
   <h1>Hello</h1>
</body>

CodePudding user response：

Just remove the dot(.) in the css selector

CodePudding user response：

just add a class to your tag

.h1{
  text-align: center;
}

<html>

<body>
  <h1 class="h1">Test</h1>
</body>

</html>

CodePudding user response：

First thing, you cannot use . for an html tag in a stylesheet.

. is used when a class is assigned to the Html element

# is used when an id is assigned to the Html element

The name of the html element for eg: h1 is used when you want to directly apply styles to the html tag

Now, For inline css, if you want to align text in the center using inline css, then use the following style:"" attribute.

<html>

<body>
  <h1 style: "text-align: center;">Test</h1>
</body>

</html>

CodePudding user response：

HTML with Bootstrap:

<div class="col-sm-12">
    <div class="row d-flex justify-content-center">
        <h1 class="col-sm-2">More Text</h1>
    </div>
    <div class="row d-flex justify-content-center">
        <h2 class="col-sm-3">More Text</h2>
    </div>
    <div class="row d-flex justify-content-center">
        <h3 class="col-sm-3">More Text</h3>
    </div>
    <div class="row d-flex justify-content-center">
        <h4 class="col-sm-3">More Text</h4>
    </div>
    <div class="row d-flex justify-content-center">
        <h5 class="col-sm-3">More Text</h5>
    </div>
</div>

CSS:

div, h1 {
    text-align: center;
}