Question 315878 in Html Question posted in
Some basic documentation can be found here.

How to align text to the right while centering it vertically in HTML?

I’m in the process of learning HTML and CSS and practicing by writing some HTML for a personal page. I am starting by creating a header with my name aligned to the right, but the text is vertically aligned to the top. I’ve seen a few examples of some people trying to achieve similar things, but none appear to solve my problem, or provide a solution that appears to be much more complex than what I’m trying to do (align text on both x and y axes independently)

.header1 {
  background-color: #000000;
  border: none;
  height: 40px;
  top: 0px;
  left: 0px;
  width: 100%;

}
.margin-zero {
  margin: 0px;
}
.header1Title {
  color: white;
  font-size: 25px;
  height: 40px;
  text-align: right;
  vertical-align: middle;
}
<header class="header1 margin-zero">
  <h1 class="header1Title margin-zero">Luis Argueta</h1>
</header>
Tags:

4

Answers


  1. 0

    To align right you can use justify-content: flex-end; and to centering it verically use align-items: center;

    .header1 {
    background-color: #000000;
    border: none;
    height: 40px;
    /* top: 0px; */
    /* left: 0px; */
    width: 100%;

    /* added styles */
    align-items: center;
    display: flex;
    justify-content: flex-end;
}

.header1Title {
    color: white;
    font-size: 25px;
    /* height: 40px; 
    text-align: right;
    vertical-align: middle; */
}
    Login or Signup to reply.
  2. 0

    If you are just starting to learn HTML and CSS, I would suggest learning the flex property. It’s the easiest way to vertically align elements.
    In the parent element .header1 add display: flex; for setting the container as a flexbox. align-items: center; will vertically align child elements and justify-content: end; will send it to the end of the parent container.

    .header1 {
  background-color: #000000;
  border: none;
  height: 40px;
  top: 0px;
  left: 0px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
}

.margin-zero {
  margin: 0px;
}


.header1Title {
  color: white;
  font-size: 25px;
}
    <header class="header1 margin-zero">
  <h1 class="header1Title margin-zero">Luis Argueta</h1>
</header>
    Login or Signup to reply.
  3. 0

    I am not sure what you try to achieve still you can independently move element position in X and Y like this using px and margin-top property to move element from top.

    .class-name {
  margin-top: 200px;
  margin-bottom: 100px;
  margin-right: 200px;
  margin-left: 100px;

}

        .header1 {
      background-color: #000000;
      border: none;
      height: 40px;
      top: 0px;
      left: 0px;
      width: 100%;

    }
    .margin-zero {
      margin-top: 100px;
      margin-right: 50px;
    }
    .header1Title {
      color: white;
      font-size: 25px;
      height: 40px;
      text-align: right;
      vertical-align: middle;
    }
        <header class="header1 margin-zero">
      <h1 class="header1Title margin-zero">Luis Argueta</h1>
    </header>
    Login or Signup to reply.
  4. 0

    You won’t need a lot of the settings you added since they are default settings (top 0 , left 0, width: 100% etc.).

    One way to achieve what you want is to use display: flex on the container with justify-content: flex-end; and align-items: center; which does the alignment:

    .header1 {
  background-color: #000000;
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.header1Title {
  color: white;
  font-size: 25px;
}
    <header class="header1 margin-zero">
  <h1 class="header1Title margin-zero">Luis Argueta</h1>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search