Trouble Align Div - PullRequest
Новая
       3

Trouble Align Div

1 голос
/ 19 февраля 2010

Текст «Шаг 1» не центрируется на изображении, независимо от того, что я добавил в качестве поля.У меня нет места для загрузки банкомата, но вот снимок экрана: http://i.imgur.com/fWrQp.png

Я хочу, чтобы текст совпадал с центром изображения.

Есть предложения? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <style type="text/css" media="screen">
/*<![CDATA[*/
    <!--


    div.basic{
         margin-left: auto ;
        margin-right: auto ;
        border-style:solid;
        width:750px;
    }

    div.top-level {
        /*background-color: #FBEC5D;*/
        border-style:solid;
        border-color:#0000FF; 
        margin: 20px 20px 0px 20px;
        background: url(light_pink_bg.gif) repeat-y 9px;
    }

    div.content{
        background-color: #EEEEEE;
        border-style: dotted;
        margin: 5px 5px 5px 48px;
    }

    .arrow_down
    {
        background: url(arrow_down.gif) no-repeat 32px 0;
        height: 17px;
    }

    .top-header
    {
        display: inline;
        margin: 0px 0px 30px 25px;
    }

    .top-text
    {
        display: inline;
        margin: 0px 0px 50px 0px;

    }

    .step-number
    {
        display: inline;
        height:100%;
    }


    .active_cnt
    {
        background: url(light_pink_bg.gif) repeat-y 9px;
    }



    -->
    /*]]>*/
    </style>

    <title></title>
  </head>
  <body>

    <div class="basic">
      <div class="top-level">
        <div class="step-number">
          <img src="1.png" alt ="1" height="45px" width="45px" />
        </div>

        <div class="top-text">Step 1</div>
        <div class="content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
            Curabitur a odio lacus. Nam porttitor odio nec quam suscipit rutrum. <br />
            Etiam velit felis, bibendum et tincidunt et, porta eget neque. <br />
            Proin id sapien nec risus congue malesuada vitae ut lorem.<br /> 
            Proin diam eros, porttitor id rutrum quis, tempus hendrerit nisl.
          </p>
        </div>
      </div>
      <div class="arrow_down">
         
      </div>
    </div>
  </body>
</html>

1 Ответ

1 голос
/ 19 февраля 2010

Получает ли это эффект, который вам нужен после 

.top-text
    {
        /*display: inline;
        margin: 0px 0px 50px 0px;*/
        margin:auto;
        text-align:center;

    }

Или, если я прочитаю это иначе, вы могли бы сказать следующее: 

.top-text
    {
        display: inline;
    position:relative;
    float:left;
    margin-top:5px;
    }

.step-number img
    {
        float:left;
        height:100%;
    }

div.content{
        background-color: #EEEEEE;
        border-style: dotted;
        margin: 55px 5px 5px 48px;
    }

Возможно, вам придется поигратьполе в div.content, чтобы получить желаемый верхний интервал.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...