How would I change the axis of an hr line?

HTML & CSS
201

Like this?


.hr4 img {
margin-top:28px;
}

.hr4 img + img {
margin-left:15px;

}
202

What if I put text-align:center; in outer and removed it from .hr3 .hr5 ? or is this not good practice?

    <style type="text/css">
.outer {
    max-width:818px;  /*828 */
    border:5px solid #38761d;
    background-color:#000;
    margin:0 auto;  /* top+bottom  left+right */
    text-align:center;
}

.hr3 {
    color: #38761d;
    font-style:normal;
    font-size: 89px;
    font-family:georgia;
    border-bottom:5px solid #38761d;
    padding-bottom:26px;
    margin-top:4px;
    margin-bottom:0;

}

.hr3 span {
    display:block;
    height:8px;
    background-color: #15c;
    transform:rotate(-.9deg);
    margin-top:8px;
    margin-left:30px;
    margin-right:32px;

}


.hr4 img {
margin-top:28px;
}


.hr4 img + img {
margin-left:15px;

}


.hr5 {
    color:white;
    font-style:normal;
    font-family:georgia;
    font-size:28px;
    margin-top:18px; 
    margin-bottom:23px;  /*315*/
}
    </style>
</head>
<body>

<div class="outer">
    <p class="hr3">1234567 123 12345 <span></span></p>
    <div class="hr4"><img src="https://i.imgur.com/ghT7ZVi.png" alt=""><img src="https://i.imgur.com/ghT7ZVi.png" alt=""><img src="https://i.imgur.com/ghT7ZVi.png" alt=""></div>
    <p class="hr5">Testing The Text</p>
</div>

</body>
</html>
203

If I don’t do that, then how do I center .hr4 using text-align:center;?


.hr4 img {
margin-top:28px;
}


.hr4 img + img {
margin-left:15px;

}
204

Text alignment is an inherited property. You can put it in .outer and it will affect most inline elements on the page. Coder’s choice.

You must have deleted the following CSS rule from you styles. .hr4 is the parent container for the images.

.hr4 {
    text-align:center;
}

Put it back.

As @coothead’s code shows, that container <div class="hr4"> is not necessarily needed. .outer can be the parent of the images by deleting .hr4. I don’t usually code quite that efficiently; I tend to containerize groups of elements to prevent unexpected interactions. However, your page is pretty simple. If your design is about finished, you could benefit from @coothead’s example and delete <div class="hr4"> and just leave the images.

.outer {
    ...
    text-align:center;
    ...
}
.outer img {
    margin-top:28px;
}
.outer img + img {
    margin-left:15px;
}

Coder’s choice.

In any case, you will want to keep the images on the same line in the HTML as you have them now because if you list them on separate lines, they will pick up a bit of “word spacing” between them and no longer be exactly 15px apart. (there are ways around that, too.)

There is often more than one way to skin a cat. :scream_cat:

1 Like
205

ok. I got it.

.hr4 {
  text-align: center;
}

.hr4 img {
  margin-top: 28px;
}

.hr4 img + img {
  margin-left: 15px;
}
206

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.