1

Basically what i'm Trying to do is to make an anchor link (containing an arrow) to be centered in a div.

Im trying to replicate the column with an arrow (in the attached photo) only.
By only using inline-block and height: 100%; to fill the div. I'm Having problem in centering the > vertically.

I know it can be done using display: table; and display: table-cell; still i'm experimenting with the display: inline-block; property.

I hope I stated the Question in a clear manner.

You can also remove the commented properties in the fiddle to show my desired result.

Guess i'm not allowed to post a photo yet.

This is the Photo:
http://yodame.freeoda.com/images/inline-block.jpg

This is the fiddle that i'm working on earlier.
http://jsfiddle.net/nonamedesen/kVpSk/3/

user2613157
  • 11
  • 1
  • 2
  • Instead of using an actual character. Why not use a background image of an arrow and set the background position to be the center of the element? – npage Jul 24 '13 at 08:32
  • @user1938671, thanks for the reply. I'm trying to lessen the images that i need to use and would like to learn how it is done using a character without a background image instead. :D – user2613157 Jul 24 '13 at 08:38
  • maybe this will help http://stackoverflow.com/questions/12686065/set-line-height-as-a-percentage-relative-to-the-parent-element – Mihai Alex Jul 24 '13 at 08:53
  • @MihaiAlex I also tried this approach, but quite not sure if i implemented it correctly. The `>` is still not aligning vertically inside the div. here's the code i used [code](http://codepen.io/anon/pen/hfcLF) – user2613157 Jul 24 '13 at 09:58
  • another approach link given here : http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div/39904652#39904652 – Dashrath Oct 06 '16 at 19:58

2 Answers2

0

To do it without any other element,you can apply line-height style on your link.

a {
color: #fff;
background-color:#e74c3c;
text-decoration: none;
padding:0 2em;
line-height:15em}

Just change the value to center your text. JSFIDDLE

BUT, if the height of the element change for any reason, the value stil be there, and your character can be invisible... (you can try on ny first fiddle to change the height of the result window)

The best way i think is to set more div and center the div with the link. Here is an example JSFIDDLE2

f.vincent
  • 195
  • 1
  • 6
  • Hi i was thinking of doing that but that would be the problem. but as much as i want to, i want to explore the `inline-block` property with the `height: 100%;` to be used. And I also notice that when I align the `>` vertically it still remains on top. – user2613157 Jul 24 '13 at 10:03
0

If your inline-block doesn't need to have any other text, then you can add padding to it so that span remains in center

HTML

<div>
    <span><a href="">&gt;</a></span>
</div>

CSS

div{
    display: inline-block;
    background: #60D3E8;
    padding: 50px 60px; 
}

span {
    font: bold 50px/50px 'source code pro', sans-serif;
}

a {
    color: white;
    text-decoration: none;  
}

DEMO

Sourabh
  • 8,243
  • 10
  • 52
  • 98
  • Hi @Sourabh I kinda know this approach but i would love to learn the approach using the `inline-block` and `height: 100%;` properties for the element to be click-able just like when you try to use the `display: table;` approach. it seems that when i use the `height: 100%;` and `vertical-align: middle` the arrow remains on top which i want to be leveled with the word **arrow**. I updated the fiddle to show it to you. [updated fiddle](http://jsfiddle.net/nonamedesen/kVpSk/12/) – user2613157 Jul 24 '13 at 09:37