CODEWITHSUNDEEP
htmlcsstext-align
Innerout
Innerout

Reputation: 27

Html align text to center

I am making some portfolio and this question occurs in my favourite music portfolio. You can see the music name that is long will go to another line and will automatically align the text to center. However, the music name that isn't long will not align text to center. How can I do?

img{
  width: 160px;
  height: 90px;
}
.container{
  display: grid;
  grid-gap: 10px;
}
.music{
  background: #123;
  width: 400px;
  height: 90px;
}
a{
  display: flex ;
}
p{
  text-decoration: none;
  list-style: none;
  color: white;
  font-family: sans-serif;
  font-size: 26px;
  text-align: center;
  display: flex;
  align-items: center;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="container">
      <article class="music">
          <a href="#">
            <img class="thumbnail" src="https://img.youtube.com/vi/RgKAFK5djSk/maxresdefault.jpg" alt="">
            <p>See you again</p>
          </a>
       </article>
        <article class="music">
            <a href="#" class="music-child">
              <img class="thumbnail" src="http://i3.ytimg.com/vi/o3KXwe-7A-I/maxresdefault.jpg" alt="">
              <p>Deep Chills - Run Free</p>
            </a>
        </article>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Upvotes: 2

Views: 111

Answers (2)

Emre Kayaoglu
Emre Kayaoglu

Reputation: 611

You can just add margin-left and margin-right in p tag as following:

margin-left: auto;
margin-right: auto;

So complete style of p tag is as following:

p {
  text-decoration: none;
  list-style: none;
  color: white;
  font-family: sans-serif;
  font-size: 26px;
  text-align: center;
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

Hope to helpful!

Upvotes: 1

Balastrong
Balastrong

Reputation: 4474

You don't need display: flex; in your p tag, and you may want to add width: 100%;

img {
  width: 160px;
  height: 90px;
}

.container {
  display: grid;
  grid-gap: 10px;
}

.music {
  background: #123;
  width: 400px;
  height: 90px;
}

a {
  display: flex;
}

p {
  text-decoration: none;
  list-style: none;
  color: white;
  font-family: sans-serif;
  font-size: 26px;
  text-align: center;
  align-items: center;
  width: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="container">
    <article class="music">
      <a href="#">
        <img class="thumbnail" src="https://img.youtube.com/vi/RgKAFK5djSk/maxresdefault.jpg" alt="">
        <p>See you again</p>
      </a>
    </article>
    <article class="music">
      <a href="#" class="music-child">
        <img class="thumbnail" src="http://i3.ytimg.com/vi/o3KXwe-7A-I/maxresdefault.jpg" alt="">
        <p>Deep Chills - Run Free</p>
      </a>
    </article>
  </div>
  <script src="script.js"></script>
</body>

</html>

Upvotes: 1

Related Questions