HTML: How to center a paragraph and image in a link?

Question

.brandingWrapper {
  cursor: pointer;
  display: flex;
  height: 42px;
}

.apptitle {
  margin-left: 5px;
  font-size: 28px;
  font-family: 'apptitle';
  vertical-align: center;
  color: black;
}

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

<div>
  <a class="brandingWrapper" href="/">
    <img class="applogo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Wikipedia%27s_W.svg/128px-Wikipedia%27s_W.svg.png?20220824035851" width="42" height="42" />
    <p class="apptitle">Appname</p>
  </a>
</div>

But this is what it looks like:

How can I center the text?

Edit:

Sorry for the confusion. I want it vertically centered, so it is on the same height as the logo.

You cannot have a block element (`
`) inside an inline element (``). — moonwave99, Dec 07 '22 at 11:34
`vertical:align` only work on inline-element. `
` is block element. convert `
` to `` — Anil kumar, Dec 07 '22 at 11:35
@moonwave99 — The `` element hasn't been inline for a very long time. [It now has a transparent content model.](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element). — Quentin, Dec 07 '22 at 11:35
for horizontal center : add property `justify-content: center;` on .brandingWrapper — Anil kumar, Dec 07 '22 at 11:46

score 1 · Accepted Answer · answered Dec 07 '22 at 11:38

Paragraphs have, by default, a significant margin-top. You need to reduce it.

.brandingWrapper {
  cursor: pointer;
  display: flex;
  height: 42px;
}

.apptitle {
  margin: 5px 0 0 5px;
  font-size: 28px;
  font-family: 'apptitle';
  vertical-align: center;
  color: black;
}

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

<div>
  <a class="brandingWrapper" href="/">
    <img class="applogo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Wikipedia%27s_W.svg/128px-Wikipedia%27s_W.svg.png?20220824035851" width="42" height="42" />
    <p class="apptitle">Appname</p>
  </a>
</div>

Erikwski · Answer 2 · 2022-12-07T11:33:51.487

0

In the parent div you have to add the following css code:

div{
   display: flex;
   justify-content: center;
   align-items: center;
}

if you don't want to center horizontal just delete:

justify-content: center;

edited Dec 07 '22 at 11:33

answered Dec 07 '22 at 11:32

Erikwski

39
6

score 0 · Answer 3 · answered Dec 07 '22 at 11:41

well there is so many ways to center elements in your code you can center it by changing margin property for apptitle to this

.apptitle {
          font-size: 28px; 
          font-family: 'apptitle'; 
          vertical-align: center;
          color: black;
          margin-right:auto; 
          margin-left:auto; 
 }

score -1 · Answer 4 · edited Dec 27 '22 at 07:51

-1

We can enter the button by using text-align:center.

By setting the value of text-align property of parent div tag to the center. margin:auto- By setting the value of margin property to auto.

edited Dec 27 '22 at 07:51

marc_s

732,580
175
1,330
1,459

answered Dec 07 '22 at 11:36

MANYA MALHOTRA

11
2

score -1 · Answer 5 · answered Dec 07 '22 at 11:36

-1

You need two additional css properties in your apptitle class:

...

.apptitle {
  ...
  display: flex;
  align-self: center;
}

And you can remove vertical-align: center; because this will do nothing. Its invalid.

answered Dec 07 '22 at 11:36

DerHerrGammler

324
2
9

HTML: How to center a paragraph and image in a link?

Edit:

5 Answers5