How to align two items horizontally and vertically

Question

Hi I will like to know how can I align an h2 and p horizontally and vertically.

.bg-text {
 position: relative;
 top: 50%;
 margin: 0 auto;
 transform: translateY(-50%);
  text-align: center;
  background-color: rgba(255, 255, 255, .7);
  }

  span {
 display: block;
 }
<section class="Home">

  <h1>TEXT</h1>
  <p>More Text</p>
</section>

Possible duplicate: http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div — Chris Happy, Jan 10 '17 at 23:30

score 4 · Answer 1 · answered Jan 10 '17 at 23:28

4

Aside from the other techniques here, you can use flexbox with a combination of justify-content: center; and align-items: center;.

This is a good article on centering stuff https://www.w3.org/Style/Examples/007/center.en.html

div {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

<div>
  <h2>H2</h2>
  <p>paragraph</p>
</div>

answered Jan 10 '17 at 23:28

Michael Coker

52,626
5
64
64

Dang that's clean. I'm noting this one. – justDan Jan 10 '17 at 23:35

Brett DeWoody · Accepted Answer · 2017-01-10T23:47:04.113

1

If you can wrap the elements in a tag, like a div, then you can use transform to center the element both horizontally and vertically, like this:

html,
body,
section.Home {
  min-height: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

h2,
p {
  margin: 0;
  padding: 0;
}

.centered {
  position: absolute;
  display: inline-block;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<section class="Home">
  <div class="centered">
    <h2>H2</h2>
    <p>paragraph</p>
  </div>
</section>

edited Jan 10 '17 at 23:47

answered Jan 10 '17 at 23:24

Brett DeWoody

59,771
29
135
184

it dosnt work on my code, i put my code in the description – Bryan Jan 10 '17 at 23:34
Did you wrap the `h2` and `p` in a `
` with a class of `centered`?
– Brett DeWoody Jan 10 '17 at 23:38
Yes, i copied your code, but i have a big space betwen the h2 and the p – Bryan Jan 10 '17 at 23:41
Did you add the CSS to set the margin and padding for the `h2` and `p` elements to `0`? – Brett DeWoody Jan 10 '17 at 23:42
The body has margin 0 and padding 0 – Bryan Jan 10 '17 at 23:43
By default most browsers will give `h2` and `p` elements some margin and/or padding, so you need to reset those to eliminate the extra spacing. – Brett DeWoody Jan 10 '17 at 23:44
You must have some other CSS being applied. You'll need to provide a more complete example. – Brett DeWoody Jan 10 '17 at 23:47
Thank you very much I figured out deleting more code i had – Bryan Jan 10 '17 at 23:57

Andrey · Answer 3 · 2017-01-10T23:28:09.967

0

To do so you need to use with padding or height or something else...there is many ways to do so.

Here one example how to do it:

<!DOCTYPE html>
<html>
<head>
<style>
.holder{
width:500px;
height:500px
}
.text{
background-color:green;
text-align:center;
padding:50% 0;
}
</style>
</head>
<body>

<div class = "holder">
<div class="text">
<h1>Hello man</h1>
<p> text text text text</p>
</div>
</div>

</body>
</html>

here link: http://www.w3schools.com/css/css_align.asp
There you have all info about it...

edited Jan 10 '17 at 23:28

answered Jan 10 '17 at 23:18

Andrey

58
1
9

I tried it but it dosnt say how to do it why 2 diferent tags – Bryan Jan 10 '17 at 23:19

justDan · Answer 4 · 2017-01-10T23:27:50.050

You mean something like this? You can use transform: translateY(-50%); to achieve that look.

Example:

<div class='bg'>
   <div class='bg-text'>
     <h1>Climate.IQ® Team <span>Other text here</span></h1>
   </div>
</div>


.bg {
    width: 100%;
    height: 500px;
    background-color: rgba(0, 0, 0, .7);
}

.bg-text {
   position: relative;
   top: 50%;
   margin: 0 auto;
   transform: translateY(-50%);
   text-align: center;
   background-color: rgba(255, 255, 255, .7);
}

span {
  display: block;
}

https://jsfiddle.net/y58hu6tv/3/

Ralph David Abernathy · Answer 5 · 2017-01-11T00:04:56.413

0

I made some edits to your example to make it work.

HTML:

<section class="home">
  <h1>TEXT</h1>
  <p>More Text</p>
</section>

It's standard to keep class names in HTML lowercase.

CSS:

.home {
  height: 100px;

  /* Internet Explorer 10 */
  display:-ms-flexbox;
  -ms-flex-pack:center;
  -ms-flex-align:center;

  /* Firefox */
  display:-moz-box;
  -moz-box-pack:center;
  -moz-box-align:center;

  /* Safari, Opera, and Chrome */
  display:-webkit-box;
  -webkit-box-pack:center;
  -webkit-box-align:center;

  /* W3C */
  display:box;
  box-pack:center;
  box-align:center;
}

p, h1 {
  margin: 0;
  display: inline;
}

Demo

edited Jan 11 '17 at 00:04

answered Jan 10 '17 at 23:45

Ralph David Abernathy

5,230
11
51
78

It has the two elements side by side, I need them one under the other, but
dosnt work – Bryan Jan 10 '17 at 23:49
@Bryan I updated the code so that the elements are stacked. – Ralph David Abernathy Jan 11 '17 at 00:05

How to align two items horizontally and vertically

5 Answers5