2

私は純粋な cssの初心者です。それは素晴らしくて簡単です!

私のHTML：

<header class="pure-u-1 pure-u-md-1-1">
<div class="pure-u-4-5">

    <div class="left-in-header pure-u-3-8">This should be in left</div>

</div>

</header>

私のCSS：

@font-face{
    font-family: 'myfont';
    src: url('myfont.ttf');
}


html, button, input, select, textarea, *, * *,
.pure-g [class *= "pure-u"] {
    /* Set your content font stack here: */
    font-family: 'myfont', Times, "Times New Roman", serif !important;
}

html{
    direction:rtl;
    box-sizing: border-box;

}


*, *:after, *:before{
    box-sizing: inherit;
}

*{
    margin:0;
    padding:0;
}

header{
    color:white;
    background:#b90101;
    background: rgba(200,1,1,0.8);
    margin:0 !important;
    padding:2px 0!important;
}

header > div{
    margin:auto;
    display:block !important;
    background:red;

}

.left-in-header{
    background:green;

}

class の緑の div を見てください.left-in-header。親の左側に置きたいです! (そのサイズはpure-u-3-8)。 (私のウェブサイトの言語はペルシア語で、ペルシア語は右から左、私の方向は rtl です)

そして、純粋なクラスでdivを親の中心に置く方法は?

4

2 に答える 2

3

以下の css プロパティを に渡します:

.pure-u-3-8{
 float:left;
text-align:left;
}

margin:auto指定されている場合は、div 自体とその親から削除します

于 2015-12-29T12:21:46.177 に答える
1

フレックスボックスを使用するのは良い考えかもしれません。定義時にテキストの方向を尊重します<html dir="rtl" ...>。

display: flex配置は、親にand justify-content: flex-end(または、別の方法でより多くのアイテムを配置する場合はspace-betweenorのように異なる) を設定することで実現できます。その他のオプションについては、 httpsspace-around ://css-tricks.com/snippets/css/a-guide-to-flexbox/ のガイドを参照してください。

于 2015-12-29T12:27:02.120 に答える