How to make 3 text boxes on the same line and aligned to the center
I want the 3 text boxes to be left aligned, centered, right aligned on the horizontal axis and on the same line.
I can use margin-left
and margin-right
to set the textbox in the middle, and then with position:absolute
and left:0
I can get the textbox on the left side (on the same line as the middle box).
Now the problem is in the last field, in the right field. Using position:absolute
and right:0
, place the box on the right, but it shows one line below.
I can not figure out what I'm doing wrong, and frankly, I have no idea how position:absolute
and left:0
make the items displayed on the same line as that of the middle element.
#sectionM,
#sectionL,
#sectionR {
width: 250px;
border: 1px outset black;
padding: 5%;
text-align: center;
}
#sectionM {
margin-left: auto;
margin-right: auto;
}
#sectionL {
position: absolute;
left: 0px;
}
#sectionR {
position: absolute;
right: 0px;
}
header {
text-align: center;
}
nav {
text-align: center;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Misha Homepage</title>
<link rel="stylesheet" type="text/css" href="mainstyle.css">
</head>
<header>
<h1>Hi!</h1>
</header>
<nav><a href="archive/myFirstWebpage/mainPage.html">Archive</a>
</nav>
<article>
<section id="sectionL">
This is the left LEFT.
</section>
<section id="sectionM">
This is the mid MID.
</section>
<section id="sectionR">
This is the right RIGHT.
</section>
</article>
</html>
source to share
There are so many ways to do this. Here is a usage solution inline-block
since it is responsive and works well in almost all browsers.
body {
text-align: center;
}
nav {
margin-bottom: 1.5em;
}
article {
font-size: 0; /*fix white space*/
}
article > section {
font-size: 16px;
display: inline-block;
width: 250px;
border: 1px outset black;
padding: 30px;
box-sizing: border-box;
}
<header>
<h1>Hi!</h1>
</header>
<nav>
<a href="#">Nav item</a>
</nav>
<article>
<section>This is the left box.</section>
<section>This is the mid box.</section>
<section>This is the right box.</section>
</article>
If you don't want it to be responsive add the following style.
article {
width: 750px;
}
source to share