1

div の上からのテキストの配置に問題があります。

ここにHTMLがあります： 

<div id="services">

        <div class="langelis">
            <div class="icon">
                <img src="images/knyg.jpg" alt="knyga" />
            </div>

            <div class="txt">
                    <h1>Lorem Ipsum</h1>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s..</p>
            </div>
        </div>
        <div class="clear"></div>
    </div>

ここにCSSがあります：

#content #main #services {
    width: 1010px;
    height: auto;
    min-height: 320px;
    margin: 50px auto;
}

#content #main #services .langelis {
    width: 510px;
    height: auto;
    min-height: 140px;
    position: relative;
    border: 1px #000 solid; 
}

#content #main #services .langelis .icon {
    width: 65px;
    min-height: 140px;
    height: auto;
    float: left;
    border: 1px #000 solid;
}

#content #main #services .langelis .txt {
    width: 440px;
    height: auto;
    float: left;
    border: 1px #000 solid;
}

テキストの作り方

Lorem Ipsum Lorem Ipsum は、印刷および植字業界の単なるダミー テキストです。Lorem Ipsum は、1500 年代以来、業界標準のダミー テキストでした。

.txt div の中心から揃えますか? ご協力いただきありがとうございます

4

2 に答える 2

0

まず、css セレクターを修正する必要があります。
この方法ですべての ID を書き込むことはできません。

#content #main #services

1 つの要素とその子を選択するだけです。
たとえば、これをテストすると、次のように動作します。

#services .langelis .txt {
width: 440px;
height: auto;
float: left;
border: 1px #000 solid;
text-align:center;

}

.txt divの中央に垂直に揃えたい場合は、次のようにします。

#services {
    width: 1010px;
    height: auto;
    min-height: 320px;
    margin: 50px auto;
   
}

#content #main #services .langelis {
    width: 510px;
    height: auto;
    min-height: 140px;
    position: relative;
    border: 1px #000 solid; 
}

#content #main #services .langelis .icon {
    width: 65px;
    min-height: 140px;
    height: auto;
    float: left;
    border: 1px #000 solid;
}

 #services .txt {
    width: 440px;
    height: 500px;
    border: 1px #000 solid;
    display:table;
    text-align:center;
}
.sub{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
<div id="services">

        <div class="langelis">
            <div class="icon">
                <img src="images/knyg.jpg" alt="knyga" />
            </div>

            <div class="txt">
            <div class="sub">
                    <h1>Lorem Ipsum</h1>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s..</p>
            </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>

于 2016-12-15T03:34:51.460 に答える
-1

垂直方向の配置については、次の簡単な例を参照してください: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

于 2013-03-24T16:12:26.577 に答える