CODEWITHSUNDEEP
htmlcss
nooooob
nooooob

Reputation: 1

Centering text that works as a button in HTML and CSS

I would like to center the text inside my p element but I don't know how to do it.

Here is my HTML code

        .header{
    	width: 100%;
    	height: 320px;
    	background-color: #584F52;
    	color: #CEC7C9;
    	text-align: center;
    	font-family: 'Century Gothic';
        }

        .header-text{
    	padding-top: 30px;
    	font-size: 150px;
        }

        a{
    	text-decoration: none;
    	color: #CEC7C9;
        }

        .header-support{
     	font-size: 25px;
    	padding-top: 0px;
    	padding-bottom: 20px;
        }

        .button{
    	width: 70px;
    	background-color: #CEC7C9;
	    color: #584F52;
        }

        p{
    	text-align: center;
        }
<html>
        <head>
        <title> title </title>
        <link rel="stylesheet" type="text/css" href="aicts.css">
        </head>
        <body>

        <div class="header">
    	<div class="header-text"> <a href="#"> TITLE </a> </div>
    	<div class="header-support"> support for the title </div>
    	<div class="nav"> <div class="button"> <p> button </p> </div>
        </div>

I'm just new in web development and doing bunch of MOOCs so I still dont know the proper formatting and the right coding practices. If you don't mind, I will be glad if you will tell me what's wrong with my code.

Upvotes: 1

Views: 78

Answers (8)

Abhishek Gurjar
Abhishek Gurjar

Reputation: 7476

You can use

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

or 

p{  width:auto;  text-align:center;}

both of them work and without disturbing other elements.

Upvotes: 1

Shashank
Shashank

Reputation: 2060

Add a new style to the div.button as follows:

.button {
  display: table;
  margin: 0 auto;
}

And modify the styling for p as shown below:

p {
  margin: 0 auto;
}

You can refer to the demo.

Upvotes: 0

Mantom
Mantom

Reputation: 79

Add margin: 0 auto; to your .button class.

Also, there's no need for <p> tag inside <button> for text.

Upvotes: 1

Iqbal Pasha
Iqbal Pasha

Reputation: 1316

In below css class .button just you need to add display: inline-block; will solve the issue also you can copy and past below code.

.button{
 width: 70px;
 background-color: #CEC7C9;
 color: #584F52;
 display: inline-block;
}

Upvotes: 1

Saurav kr. Agrawal
Saurav kr. Agrawal

Reputation: 119

Whatever you are doing is right but you gave fix width to the button.Just replace your css for button class with this:

.button{
width: 100%;
background-color: #CEC7C9;
color: #584F52;
margin: 0 auto;
}

This will work same as you want.

Upvotes: 2

Jainam
Jainam

Reputation: 2660

Try this:

Add margin:0 auto; in .button class.

 .header{
    width: 100%;
    height: 320px;
    background-color: #584F52;
    color: #CEC7C9;
    text-align: center;
    font-family: 'Century Gothic';
    }

    .header-text{
    padding-top: 30px;
    font-size: 150px;
    }

    a{
    text-decoration: none;
    color: #CEC7C9;
    }

    .header-support{
    font-size: 25px;
    padding-top: 0px;
    padding-bottom: 20px;
    }

    .button{
    width: 70px;
    background-color: #CEC7C9;
    color: #584F52;
    margin: 0 auto;
    }

    p{
    text-align: center;
    }
    <div class="header">
    <div class="header-text"> <a href="#"> TITLE </a> </div>
    <div class="header-support"> support for the title </div>
    <div class="nav"> <div class="button"> <p> button </p> </div>
    </div>

Upvotes: 1

Autista_z
Autista_z

Reputation: 2541

First, p tag is for paragraph. In button you dont have paragraph, just text. So you should not use p tag.

<div class="nav"><div class="button">button</div>

.button{
    width: 70px;
    background-color: #CEC7C9;
    color: #584F52;
    text-align: center;
 }

Upvotes: 1

vinayak hegde
vinayak hegde

Reputation: 2252

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

Upvotes: 1

Related Questions