CODEWITHSUNDEEP
htmlcss
AWEI
AWEI

Reputation: 427

How to use CSS to make the divider line align with the left and right sides?

Excuse me, today I need to align an hr divider line on both sides of the screen, but I have used padding on the periphery of this block to push it inward, so how can I make the middle hr align with the left and right sides of the screen? ?enter image description here

body{
  height: 100vh;
  display: flex;
  justify-content:center;
  align-items:center;
  background-color: #ccc;
}
.demo{
  width: 375px;
  background-color: #fff;
  padding:30px;
}
<div class="demo">
  <div class="article">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio incidunt facilis accusantium iure esse, fugiat qui iusto, explicabo deleniti obcaecati porro veritatis ipsum maxime dolores fugit, culpa aspernatur similique alias?</div>

<hr class="divider">
    <div class="article">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio incidunt facilis accusantium iure esse, fugiat qui iusto, explicabo deleniti obcaecati porro veritatis ipsum maxime dolores fugit, culpa aspernatur similique alias?</div>
</div>

Upvotes: 0

Views: 1546

Answers (1)

JHeth
JHeth

Reputation: 8366

You can add negative margin to the right and left of the divider that is equal to the outer padding.

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ccc;
}

.demo {
  width: 375px;
  background-color: #fff;
  padding: 30px;
}

.divider {
  margin-left: -30px;
  margin-right: -30px;
}
<div class="demo">
  <div class="article">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio incidunt facilis accusantium iure esse, fugiat qui iusto, explicabo deleniti obcaecati porro veritatis ipsum maxime dolores fugit, culpa aspernatur similique alias?</div>

  <hr class="divider">
  <div class="article">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio incidunt facilis accusantium iure esse, fugiat qui iusto, explicabo deleniti obcaecati porro veritatis ipsum maxime dolores fugit, culpa aspernatur similique alias?</div>
</div>

Upvotes: 1

Related Questions