Geek asks and answers

CSS style image horizontal positioning?

So I am trying to position the facebook / youtube / twitter button on a div element with a width of 318 pixels (i.e. about 106 pixels per button).

Expected output

expected layout
(source: iforce.co.nz )

I use float and display: inline for each button when rendering it. I have provided my code below.

CSS code

#socialController{
width: 318px;
background-color:#fff;
display: inline;
}
.socialmedia
{
width:106px;
height:20px;
float:left;
vertical-align:middle;
background-position:center center;
background-repeat:no-repeat;
background-color:#373737;
}
.socialmedia:hover{
background-color:#444
}
#sm_fb{
background-image:url(../img/fb.png)
}
#sm_tw{
background-image:url(../img/tw.png)
}
#sm_yt{
background-image:url(../img/yt.png)
}

HTML code

<div id="socialController">
<a href="#" class="socialmedia" id="sm_fb" title="CSGONZ Facebook"></a>
<a href="#" class="socialmedia" id="sm_yt" title="CSGONZ Youtube"></a>
<a href="#" class="socialmedia" id="sm_tw" title="CSGONZ Twitter"></a>
</div>

But the problem is that I do not achieve the expected horizontal positioning ... but instead I get the vertical positioning of the buttons.

Actual result

actual output
(source: iforce.co.nz )

What is the problem? What am I missing? achieve horizontal positioning?

+5
source share
7 answers

Let's try this:

#socialController {
width: 318px;
background-color:#fff;
display: block;
}

Like this:

http://jsfiddle.net/CQTus/

+3
source

: ; socialmedia, socialController

+1

, .

this: ( ) CSS.

, :)

+1

- http://jsfiddle.net/6PaY4/

, !

+1

:

!

enter image description here

CSS

#socialController{
  width: 318px;
  background-color:#fff;
  display: block;         /* display the wrapper as a block */
}
.socialmedia {
  width:106px;
  height:20px;
  display:block;          /* display the element as a block */
  float:left;             /* float the elements to place them side by side */
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#373737;
}
+1

, ...

. ,

. CSS, , . : a{display:block} .

+1

, - CSS, , :)

+1

More articles:


All Articles