CODEWITHSUNDEEP
css
Ave
Ave

Reputation: 107

Center div with position absolute?

I was wondering how I could center this div.

https://jsfiddle.net/eLjy45zq/

I tried adding auto margin but it won't center it on the screen.. i also want it to be responsive. i didn't want to add a fixed width because i want the border top/bottom line to match the length of the word. Also, is there a way i can make the top and bottom lines double? 

   .name {
  font-family: 'PT Sans', sans-serif;
  font-size: 80px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
}

Upvotes: 2

Views: 116

Answers (1)

Tech Savant
Tech Savant

Reputation: 3766

.wrapper {
    position: fixed;
    top: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
}

.name {
  font-family: 'PT Sans', sans-serif;
  font-size: 80px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  display: inline-block;       
}

https://jsfiddle.net/eLjy45zq/2/

Create a wrapper and use display: inline-block; to get the lines to work how you want them.

(Added position: fixed to the wrapper, change as needed)

Upvotes: 5

Related Questions