How to center text inside a centered div

HTML & CSS
1

Hi everyone,
This is my HTML code:

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="to_forum.css">
</head>
<body>
<p id="title1">
	<span>ABCD</span>
</p>
</body>
</html>

This is my css code

#title1 
{
	position: relative;
    width: 80%;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
	background: #FFF8DC;
	border: 2px solid #6B8E23;
	border-radius: 20px;
}
#title1 span
{
	color: #6b8e23;
	position: absolute;
	margin-top:10px;
	font-family: 'Heebo', sans-serif;
	font-size: 2em;
	font-weight: bold;
	margin-right: auto;
	margin-left: auto;
	text-align:center;
}

I try to place “ABCD” at center of title but without success . Attached is a screenshot.
Can anyone tell me how to center a title within a centered div?
Thanks

to_forum3
to_forum31600Ă—900 44.2 KB

2

I have formatted your code for you to make it easier for us to read. In the future, when you post code here you can format it yourself by placing three backticks(```) on the line before the code, and three backticks on the line after the code. Alternatively, you can highlight your pasted code and select the <> icon from the top of the edit area of your post.

3

Thanks

4

Hi there deotpit,

try it like this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" type="text/css" href="to_forum.css">

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }
 
#title1 {
    width: 80%;
    padding:0.4em 0;
    margin: 0.5em auto;
    border: 0.09em solid #6b8e23;
    border-radius: 0.62em;
    background: #fff8dc;
    font-family: Heebo, sans-serif;
    font-size: 2em;
    font-weight: bold;
    color: #6b8e23;
    text-align: center;
 }
</style>

</head>
<body>

 <p id="title1">ABCD</p>

</body>
</html>

coothead

5

Your question is very basic.

I would like to recommend that you invest some time in yourself and take a basic HTML and CSS course. You will be impressed by how much you can learn to do in a reasonably short amount of time if you work all of the lessons and exercises.

6

Thanks a lot.
I haven’t yet given an insight look at the code you suggest but from first sight it lacks the vertical centering.
My code manages centering vertically but I couldn’t center it horizontally at the same time.
Thanks again !

7

You might find this guide helpful:

2 Likes
8

It does?

deotpit
deotpit676Ă—540 7.51 KB

9

Hi,
I used the link you uploaded and changed my css code to the following:


#title1 
{
   position: relative;
   width: 80%;
   height: 50px;
   margin-left: auto;
   margin-right: auto;
   background: #FFF8DC;
   border: 2px solid #6B8E23;
   border-radius: 20px;
}
#title1 span
{
   position: absolute;
   margin-top:10px;
   font-family: 'Heebo', sans-serif;
   font-size: 2em;
   font-weight: bold;
   top: 30%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: #6b8e23;
}

![to_forum33|690x388](upload://q9FX61QWkkfO4sgIkZjSZwgRudL.gif)

And got the most close to centering as shown in my screenshot.
Thanks a lot !

1 Like
10

I’m glad you found the link useful, but I confess I’m puzzled by your approach here. (Asking about centering in a div when you have no div does nothing to help the confusion. wink)

If it’s a title, wouldn’t an <h*> tag be more appropriate than a <p> tag? Why do you need the <span>? Why do you need to use absolute positioning? You may have good reasons for these that I’m unaware of, but you could achieve what you want more simply and with more semantic code.

1 Like
11

I started with h2 but then couldnt attach it on top of page and it had wide spaces around it which I couldnt
understand the reason.
Then I thought I might have better control using div and span which I had.
Maybe I started with div then thought it to be unnecessary.
Yes, it brought much confusion upon me and unfortunatele it is shown at my posts…
Thanks again

12

I believe that your confusion would be resolved if you would invest some time in yourself and take a basic HTML and CSS course.

13 
<h2 class="title1">ABCD</h2>

.title1 {width: 80%;
	text-align: center;
	font-family: 'Heebo', sans-serif;
	font-size: 2em;
	font-weight: bold;
        color: #6b8e23;
	margin: auto;
	background: #FFF8DC;
	border: 2px solid #6B8E23;
	border-radius: 20px;
	padding: 0.3em 0 0.2em;
	}

That looks to me to be pretty much what you wanted, with rather less code. It will also work if the visitor increases or decreases font size.

1 Like
14

I’m cordially thanking you Technobear.
My next step causes me the same nuisense. The block is spread all over. This time it is a form not title.
Why do the blocks in my html spread all over with so much wide spaces?!

!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="to_forum.css">
</head>
<body>
<h2 class="title1">ABCD</h2>
<form method="POST" action="xx6.php" style="width: 80%;	margin: 10px auto;	border-radius: 5px;	padding: 10px;	background: #FFF8DC;border: 1px solid #6B8E23;">
	<table style="table-layout: fixed; width:80%; margin: 10% auto">
		<tr>
			<td style="border: none;height:30px;padding: 2px;"><input type="text" name="id" style="width: 73%; height: 15px;padding: 10px;	border: 2px solid #6B8E23;"></td>
			<td style="border: none;height:30px;padding: 2px;"><input type="text" name="task" style="width: 73%;height: 15px;padding: 10px;border: 2px solid #6B8E23;"></td>
			<td style="border: none;height:30px;padding: 2px;"><button type="submit" style="height: 39px; 	background: #FFF8DC;color: #6B8E23;border: 2px solid #6B8E23;border-radius: 5px;padding: 5px 20px;" 
					name="submit">Add Task</button></td>
			</tr>
	</table>
	</form>
</body>
</html>

.title1 
{
	width: 80%;
	text-align: center;
	font-family: 'Heebo', sans-serif;
	font-size: 2em;
	font-weight: bold;
        color: #6b8e23;
	margin: auto;
	background: #FFF8DC;
	border: 2px solid #6B8E23;
	border-radius: 20px;
	padding: 0.3em 0 0.2em;
}

Hopefully I’m not becoming nuisense

to_forum11
to_forum111600Ă—900 41.7 KB

15

Again, I’m not sure that you should be using HTML tables for this; it doesn’t look like tabular data to me. But leaving that aside, your problem is caused by using percentages for vertical margins.

<table style="table-layout: fixed; width:80%; margin: 10% auto">

IIRC (because I never use percentages for this redface), the 10% is calculated as 10% of the width of the element. Use ems or even pixels to give the required margin. (And take the inline styles out of your HTML and put them in the CSS, where they belong.)

2 Likes
16

We don’t mind people asking beginner questions as long as you take the time to understand the basic fundamentals of html and css. Any beginners course will set you straight in a couple of hours and then you can progress to understand the layout subtleties of css in more depth without tripping on the same basic mistakes again and again. :slight_smile:

As Technobear said above tables are really tabular data and that in most cases does not relate to form data (although some people still make a case for it). Anyway with the arrival of flexbox you don’t need such a complicated method to layout your forms anymore and it can be accomplished smoothly and effectively with flexbox.

e.g. A basic example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Template</title>
    <style>
        .title1 {
            width: 80%;
            text-align: center;
            font-family: 'Heebo', sans-serif;
            font-size: 2em;
            font-weight: bold;
            color: #6b8e23;
            margin: auto;
            background: #FFF8DC;
            border: 2px solid #6B8E23;
            border-radius: 20px;
            padding: 0.3em 0 0.2em;
        }
        
        .formwrap {
            width: 80%;
            margin: 10px auto;
            border-radius: 5px;
            padding: 10px;
            background: #FFF8DC;
            border: 1px solid #6B8E23;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            padding: 5em 0;
        }
        
        .submit {
            height: 39px;
            background: #FFF8DC;
            color: #6B8E23;
            border: 2px solid #6B8E23;
            border-radius: 5px;
            padding: 5px 20px;
            margin: 10px;
        }
        
        .inp {
            width: 100%;
            max-width: 250px;
            min-width: 100px;
            padding: 10px;
            border: 2px solid #6B8E23;
            margin: 10px;
        }
        
        @media screen and (max-width:780px) {
            .inp {
                min-width: 80%
            }
        }

    </style>

</head>

<body>
    
    <h2 class="title1">ABCD</h2>
    <form class="formwrap">
        <input class="inp" type="text" name="id">
        <input class="inp" type="text" name="task">
        <button class="submit" type="submit" name="submit">Add Task</button>
    </form>

</body>
</html>

That’s not exactly how I would do it but I used most of your code to show the effect.

(Also remember that heading tags are hierarchical and if you only have one heading on a page then that heading should be an h1 and not an h2.)

2 Likes
17

Thank you,
The reason why I use table is that the page I’m working on is aimed to manage database:
Add, delete, edit, search.
This is true that I’m stuck on basic problems again and again because I dont do internet programming
on a daily basis. I randomly have needs where I’m working and then I try to do database work but I cannot
have an internet page without elementary design.
I once learnt css but since I do it once a year I tend to forget many things.
I’m not sure taking another course will be helpful because till next time I’ll forget.
Thank you so much again and my appology for annoying questions.

1 Like
18

Hi there deotpit,

I would suggest that your form needs labels. :winky:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" type="text/css" href="to_forum.css">

<style media="screen">
html {
    box-sizing: border-box;
 }
 
*, *::before, *::after {
    box-sizing: inherit;
 }
 
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }
 
#title1 {
    width: 80%;
    padding:0.4em 0;
    margin: 0.5em auto;
    border: 0.09em solid #6b8e23;
    border-radius: 0.62em;
    background: #fff8dc;
    font-family: Heebo, sans-serif;
    font-size: 2em;
    font-weight: bold;
    color: #6b8e23;
    text-align: center;
    text-transform: uppercase;
 }
 
#task-form {
    display: table;
    width: 80%;	
    margin: 0.62em auto;
    border-radius: 0.4em;
    border-spacing:1.8em;
    background: #fff8dc;
    border: 1px solid #6B8E23;
 }
 
#task-form fieldset {
    display: table-cell;
    border: 0;
    vertical-align: middle;
    text-align: center;
 }
 
#task-form label {

    font-weight: bold; 
    color: #6b8e23;
 }

#task-form label:last-of-type{
    visibility: hidden;
 }
 
#task-form label:last-of-type input{
    visibility: visible;
 }
 
#task-form input{
    width: 10em;
    padding: 0.4em 0.25em;
    margin: 0 0.25em 0.5em 0.75em;	
    border: 0.15em solid #6B8E23;
    font-size: 1em;
    color: #6b8e23;
 }
 
#task-form  input[type=submit]{
    border-radius: 0.4em;
    margin: 0 0 0 0;
    background: #fff8dc;
    color: #6b8e23;
 }
 
@media ( max-width: 42em ){
#title1 {
    width: 90%;
 }
 
#task-form {
    width: 90%;	
    border-spacing: 1em;
 }
 
#task-form  label {
    display: block; 
    width: 13em;
    margin: auto;
    text-align: right;
 }
 
#task-form input{
    width: 9em;
    margin: 0.25em 0 0.25em 0.5em;
 }
}
</style>

</head>
<body>

 <h1 id="title1">Form</h1>
 
 <form id="task-form" method="post" action="xx6.php">
  <fieldset>
   <label for="id">Id:
   <input type="text" id="id" name="id" required></label>
   <label for="task">Task:
   <input type="text" id="task" name="task" required></label>
   <label for="submit">Sub
   <input type="submit" value="Add Task" id="submit" name="submit"></label>
  </fieldset>
 </form>

</body>
</html>

coothead

2 Likes
19

Thanks a lot coothead !

20

 
 
        No problem, you’re very welcome. :winky:
 
 
        coothead