代码之家 › 专栏 › 技术社区 › ThinkAndCode

如何正确对齐同一行中的两个项目

alignment flexbox react-native

ThinkAndCode · 技术社区 · 3 年前

我有一个 View 包含一个 Icon 还有一个

<View style={{flexDirection: row}}>
    <Icon name={'dot} style={{marginRight: 16}} />
    <View>
       {Children}
    <View>
</View>

输出就是这样呈现的

很明显 dot child View

我变了 Icon's style 为了达到这个目的,

<Icons name={'dot'} style={{marginRight: 16, marginTop: 6}} />

我不清楚的是,

偶像 查看 2.申请 marginTop 好像是个黑客。那么,有没有什么样式元素或道具可以让它们在不使用 margintop

Avinash Nayak回答的结果:

1 回复 | 直到 3 年前

Sateesh Yemireddi 3 年前

为什么图标渲染的位置要比视图高一点?

对齐时,视图元素在父视图中正确渲染 Text 和 Icon 这看起来有点奇怪,但这是正确的方式。试着检查启动 y coordinate 文本 和把背景色都保留下来。你会知道两者都是从同一个位置开始的。
应用 marginTop 使它们正确对齐而不使用 马金托普 ?

我猜 ,这是唯一的方法,你可以添加 马金托普 top 调整顶部位置的样式。

Jignesh Mayani 3 年前

尝试以下代码更改:

<View style={
    {
       flexDirection: "row",
    }
}>
    <View style={{ alignItems: 'center' }} >
        <Icon name={'dot'} style={{marginRight: 16}} />
    </View>
    <View style={{ flex: 1 }} >
        {children}
    </View>
</View>

Avinash 3 年前

请检查您的儿童道具是否有填充物或边缘顶部。

或者你可以试试贝娄黑客。

<View style={{
     flexDirection: row,
    }}>
        <Icon name={'dot} style={{marginRight: 16}} />
        <View style={{marginTop:-4}}> // adjust the value 
           {Children}
        <View>
    </View>

推荐文章

Riddhi · 在ionic中对齐按钮

6 年前

Joshua Sparkel · 排列的元素相差几个像素

6 年前

ProtectedVoid · CSS宽度自动和向左浮动-允许溢出

6 年前

Josh Rodgers · 居中网格项目

6 年前

Jean Jacquemier · Apache箭头、对齐和填充

6 年前

Zubair · 与UILabel绘图/显示在屏幕上相关的方法

6 年前

user7055375 · 除了“文本对齐:居中把东西放在一个DIV里?

6 年前

KevinM · 在导航栏引导程序4中将图标与文本对齐

6 年前

KhiladiBhaiyya · 如何将引导程序导航栏最左边的项移到更远的左边

7 年前

Sujal · UIAlertController中的居中对齐图像操作

7 年前