Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make anchor tag fill 100% height and width of parent flex element, whilst being vertically & horizontally centered

I have a layout built using flexbox, but there is one aspect I just can't seem to get to work.

I have panels which have anchor tags in them that I want to be vertically and horizontally centered, but I want the anchor tags to be 100% of the width and height of the panel so that when you click anywhere in the panel it will link you, as opposed to just clicking the link text.

Here is the HTML for a panel:

<div class="panel--link panel--one">
    <a href="#" class="link">
        Panel 1
    </a>
</div>

And the SCSS:

.panel {
    box-sizing: content-box;
    flex: 1;
    border: 3px solid #fff;
    padding: 0px;
    text-align: center;
}

.panel--link {
    @extend .panel;
    display: flex;  
    flex: 1;
    justify-content: center;
    align-items: center;

    a.link {
        text-decoration: none;
        color: #fff;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 1rem;
        letter-spacing: 3px;
        flex: 1;
    }
}

See my Codepen for the entire layout so you understand it better!

http://codepen.io/zauber/pen/BpRJQG

Thanks for the help

like image 478
Sean Avatar asked Jan 22 '17 12:01

Sean


People also ask

How do you change the width and height of an anchor tag?

You need to make your anchor display: block or display: inline-block; and then it will accept the width and height values.

Can we give width to anchor tag?

An anchor is an inline element by default so you can't add dimensions to it unless you change its display property.


2 Answers

Don't be afraid, make anchor flexbox too:

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

and you should add align-items: stretch to parent of anchor.

like image 111
ashish singh Avatar answered Oct 03 '22 18:10

ashish singh


Remove align-items: center from .content .panel--link and make .content .panel--link a.link a flexbox too and align it vertically using:

display: flex;
justify-content: center;
align-items: center;

See demo below:

body {
  height: 800px;
}
.main {
  height: 100%;
}
.content {
  height: 100%;
  border: 20px solid #fff;
  display: flex;
  box-sizing: border-box;
}
.content .column {
  flex-direction: column;
  width: 33.33333%;
  background: #374550;
  display: flex;
}
.content .panel,
.content .panel--link {
  box-sizing: content-box;
  flex: 1;
  border: 3px solid #fff;
  padding: 0px;
  text-align: center;
}
.content .panel .logo,
.content .panel--link .logo {
  margin: 7.5% 0px 0% 0%;
  width: 80%;
}
.content .panel .blurb,
.content .panel--link .blurb {
  width: 80%;
  margin: 7.5% auto 0% auto;
}
.content .panel .blurb h1,
.content .panel--link .blurb h1 {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
  font-weight: lighter;
  line-height: 220%;
  font-size: 0.85rem;
  margin: 0px;
}
.content .panel .tel,
.content .panel--link .tel {
  margin: 7.5% auto 5% auto;
}
.content .panel .tel h2,
.content .panel--link .tel h2 {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  font-size: 1.2rem;
  margin: 0px;
}
.content .panel--link {
  display: flex;
  flex: 1;
  justify-content: center;
  /*align-items: center;*/
  text-align: center;
}
.content .panel--link a.link {
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 3px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 768px) {
  .content .column--two {
    order: -1;
  }
  .content .column--two .panel--two {
    order: -1;
  }
}
.content .column--two .panel--one {
  flex-grow: 1;
}
.content .column--two .panel--two {
  flex-grow: 2;
  background: #374550;
}
.content .column--two .panel--three {
  flex-grow: 1;
}
<main class="content">
  <div class="column column--one">

    <div class="panel--link panel--one">
      <a href="#" class="link">
                        Panel 1
                    </a>
    </div>

    <div class="panel--link panel--two">
      <a href="#" class="link">
                        Panel 2
                    </a>
    </div>
  </div>
  <div class="column column--two">
    <div class="panel--link panel--one">
      <a href="" class="link">
                        Panel 3
                    </a>
    </div>
    <div class="panel panel--two">

      <div class="blurb">
        <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lectus orci, imperdiet ac auctor non, tristique eget augue. Curabitur quis gravida lorem, sed maximus purus. Nunc sit amet mollis turpis.</h1>
      </div>
      <div class="tel">
        <h2>123 456 789</h2>
      </div>
    </div>
    <div class="panel--link panel--three">
      <a href="#" class="link">
                        Panel 4
                    </a>
    </div>
  </div>
  <div class="column column--three">
    <div class="panel--link panel--one">
      <a href="#" class="link">
                        Panel 5
                    </a>
    </div>
    <div class="panel--link panel--two">
      <a href="#" class="link">
                        Panel 6
                    </a>
    </div>
  </div>
</main>
like image 39
kukkuz Avatar answered Oct 03 '22 16:10

kukkuz