CODEWITHSUNDEEP
htmlcss
Seby
Seby

Reputation: 262

Why the horizontal arrow does not align vertically?

I'm creating a style for creating line with or without arrows in pure css, the problem is that i can't align vertically my arrow with vertical-align middle, the horizontal one is working correctly with text-align center;

I've also tried with table-cell display.

Please consider that css is compiled with less.

.box {
  background-color: lightgray;
  width: 200px;
  height: 200px;
  margin-right: 1em;
  float: left;
  vertical-align: middle;
  text-align: center;
  display: table-cell;
}
.linea-h {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  border-top: 2px dotted dimgray;
  border-radius: 4px;
  height: 0;
}
.linea-h > * {
  position: absolute;
  transform: rotate(45deg);
  height: 8px;
  width: 8px;
}
.linea-h .left-arrow {
  margin-top: -6px;
  border-left: 2px solid dimgray;
  border-bottom: 2px solid dimgray;
  left: 0;
}
.linea-h .right-arrow {
  margin-top: -6px;
  border-right: 2px solid dimgray;
  border-top: 2px solid dimgray;
  right: 0;
}
.linea-v {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  border-left: 4px dotted dimgray;
  border-radius: 8px;
  width: 0;
}
.linea-v > * {
  position: absolute;
  transform: rotate(45deg);
  height: 8px;
  width: 8px;
}
.linea-v .top-arrow {
  margin-left: -8px;
  border-left: 4px solid dimgray;
  border-top: 4px solid dimgray;
  top: 0;
}
.linea-v .bottom-arrow {
  margin-left: -8px;
  border-right: 4px solid dimgray;
  border-bottom: 4px solid dimgray;
  bottom: 0;
}
<div class="box">
  <div class="linea-h" style="width: 200px">
    <div class="left-arrow"></div>
    <div class="right-arrow"></div>
  </div>
</div>
<div class="box">
  <div class="linea-v" style="height: 200px">
    <div class="top-arrow"></div>
    <div class="bottom-arrow"></div>
  </div>
</div>

Upvotes: 0

Views: 951

Answers (5)

sma
sma

Reputation: 9597

Try the following properties to vertically align in CSS:

 position: relative;
 top: 50%;
 transform: translateY(-50%);

I've made some changes to your linea-h class to reflect this. 

.box {
  background-color: lightgray;
  width: 200px;
  height: 200px;
  margin-right: 1em;
  float: left;
  vertical-align: middle;
  text-align: center;
  display: table-cell;
}
.linea-h {
  box-sizing: border-box;
  border-top: 2px dotted dimgray;
  border-radius: 4px;
  height: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.linea-h > * {
  position: absolute;
  transform: rotate(45deg);
  height: 8px;
  width: 8px;
}
.linea-h .left-arrow {
  margin-top: -6px;
  border-left: 2px solid dimgray;
  border-bottom: 2px solid dimgray;
  left: 0;
}
.linea-h .right-arrow {
  margin-top: -6px;
  border-right: 2px solid dimgray;
  border-top: 2px solid dimgray;
  right: 0;
}
.linea-v {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  border-left: 4px dotted dimgray;
  border-radius: 8px;
  width: 0;
}
.linea-v > * {
  position: absolute;
  transform: rotate(45deg);
  height: 8px;
  width: 8px;
}
.linea-v .top-arrow {
  margin-left: -8px;
  border-left: 4px solid dimgray;
  border-top: 4px solid dimgray;
  top: 0;
}
.linea-v .bottom-arrow {
  margin-left: -8px;
  border-right: 4px solid dimgray;
  border-bottom: 4px solid dimgray;
  bottom: 0;
}
<div class="box">
  <div class="linea-h" style="width: 200px">
    <div class="left-arrow"></div>
    <div class="right-arrow"></div>
  </div>
</div>
<div class="box">
  <div class="linea-v" style="height: 200px">
    <div class="top-arrow"></div>
    <div class="bottom-arrow"></div>
  </div>
</div>

Upvotes: 1

Iecya
Iecya

Reputation: 279

You have to remove the float rule to the .box elements With display: table-cell or display: inline-block they will still one beside the other.

Upvotes: 0

Valcone
Valcone

Reputation: 55

In my opinion the easiest way to do this is to add line-height:200px; to your box class in css. I've tested it, should work.

.box {
  background-color: lightgray;
  width: 200px;
  height: 200px;
  line-height: 200px;
  margin-right: 1em;
  float: left;
  vertical-align: middle;
  text-align: center;
  display: table-cell;
}
.linea-h {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  border-top: 2px dotted dimgray;
  border-radius: 4px;
  height: 0;
}
.linea-h > * {
  position: absolute;
  transform: rotate(45deg);
  height: 8px;
  width: 8px;
}
.linea-h .left-arrow {
  margin-top: -6px;
  border-left: 2px solid dimgray;
  border-bottom: 2px solid dimgray;
  left: 0;
}
.linea-h .right-arrow {
  margin-top: -6px;
  border-right: 2px solid dimgray;
  border-top: 2px solid dimgray;
  right: 0;
}
.linea-v {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  border-left: 4px dotted dimgray;
  border-radius: 8px;
  width: 0;
}
.linea-v > * {
  position: absolute;
  transform: rotate(45deg);
  height: 8px;
  width: 8px;
}
.linea-v .top-arrow {
  margin-left: -8px;
  border-left: 4px solid dimgray;
  border-top: 4px solid dimgray;
  top: 0;
}
.linea-v .bottom-arrow {
  margin-left: -8px;
  border-right: 4px solid dimgray;
  border-bottom: 4px solid dimgray;
  bottom: 0;
}
<div class="box">
  <div class="linea-h" style="width: 200px">
    <div class="left-arrow"></div>
    <div class="right-arrow"></div>
  </div>
</div>
<div class="box">
  <div class="linea-v" style="height: 200px">
    <div class="top-arrow"></div>
    <div class="bottom-arrow"></div>
  </div>
</div>

Upvotes: 0

Satwik Nadkarny
Satwik Nadkarny

Reputation: 5135

You can remove the float on the .box. I don't see any value in it. Instead, you could make use of the display: table, display: table-cell properties.

If you have some control over the html, you can add a container over the box elements. You can then apply the following CSS on the container :

    display: table;
    border-collapse: separate;
    border-spacing: 14px 5px;

Also, the .box class needs to have display: table-cell. See this below :

.boxContainer {
    display: table;
    border-collapse: separate;
    border-spacing: 14px 5px;
}
.box {
    background-color: lightgray;
    width: 200px;
    height: 200px;
    margin-right: 1em;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
}
.linea-h {
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    border-top: 2px dotted dimgray;
    border-radius: 4px;
    height: 0;
}
.linea-h > * {
    position: absolute;
    transform: rotate(45deg);
    height: 8px;
    width: 8px;
}
.linea-h .left-arrow {
    margin-top: -6px;
    border-left: 2px solid dimgray;
    border-bottom: 2px solid dimgray;
    left: 0;
}
.linea-h .right-arrow {
    margin-top: -6px;
    border-right: 2px solid dimgray;
    border-top: 2px solid dimgray;
    right: 0;
}
.linea-v {
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    border-left: 4px dotted dimgray;
    border-radius: 8px;
    width: 0;
}
.linea-v > * {
    position: absolute;
    transform: rotate(45deg);
    height: 8px;
    width: 8px;
}
.linea-v .top-arrow {
    margin-left: -8px;
    border-left: 4px solid dimgray;
    border-top: 4px solid dimgray;
    top: 0;
}
.linea-v .bottom-arrow {
    margin-left: -8px;
    border-right: 4px solid dimgray;
    border-bottom: 4px solid dimgray;
    bottom: 0;
}
<div class="boxContainer">
    <div class="box">
        <div class="linea-h" style="width: 200px">
            <div class="left-arrow"></div>
            <div class="right-arrow"></div>
        </div>
    </div>
    <div class="box">
        <div class="linea-v" style="height: 200px">
            <div class="top-arrow"></div>
            <div class="bottom-arrow"></div>
        </div>
    </div>
</div>

Upvotes: 0

Ninoop p george
Ninoop p george

Reputation: 678

You can use line height in css to align it into middle..Note that you have to use the same value as of height in line-height to place it in center.As you are using less you can add the height to a variable and use it..

.box {
  background-color: lightgray;
  width: 200px;
  height: 200px;
  margin-right: 1em;
  float: left;
  vertical-align: middle;
  line-height: 200px;
  text-align: center;
  display: table-cell;
}
.linea-h {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  border-top: 2px dotted dimgray;
  border-radius: 4px;
  height: 0;
}
.linea-h > * {
  position: absolute;
  transform: rotate(45deg);
  height: 8px;
  width: 8px;
}
.linea-h .left-arrow {
  margin-top: -6px;
  border-left: 2px solid dimgray;
  border-bottom: 2px solid dimgray;
  left: 0;
}
.linea-h .right-arrow {
  margin-top: -6px;
  border-right: 2px solid dimgray;
  border-top: 2px solid dimgray;
  right: 0;
}
.linea-v {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  border-left: 4px dotted dimgray;
  border-radius: 8px;
  width: 0;
}
.linea-v > * {
  position: absolute;
  transform: rotate(45deg);
  height: 8px;
  width: 8px;
}
.linea-v .top-arrow {
  margin-left: -8px;
  border-left: 4px solid dimgray;
  border-top: 4px solid dimgray;
  top: 0;
}
.linea-v .bottom-arrow {
  margin-left: -8px;
  border-right: 4px solid dimgray;
  border-bottom: 4px solid dimgray;
  bottom: 0;
}
<div class="box">
  <div class="linea-h" style="width: 200px">
    <div class="left-arrow"></div>
    <div class="right-arrow"></div>
  </div>
</div>
<div class="box">
  <div class="linea-v" style="height: 200px">
    <div class="top-arrow"></div>
    <div class="bottom-arrow"></div>
  </div>
</div>

Hope this helps...

Upvotes: 0

Related Questions