Question

我正在尝试垂直对齐列表中的某些文本并遇到问题。首先，你需要知道我已经用自定义图像替换了list-style-image。这是我的CSS：

ul.cogs li { 
    list-style-image: url(Images/li_cog.png); 
    height: 50px; 
    line-height: 50px; 
}

我试着看看是否有办法让文字与中间对齐。我试过了：

vertical-align：middle;

哪个不起作用，所以我尝试了：

行高：50px;

这也没用，所以我试过了：

显示：表格

有效，但图像从列表项中消失....

有没有人知道如何让它发挥作用？

Answer 1

使用list-style-image的问题是您无法与文字保持一致，最好的办法是将background-image用于li元素，然后使用padding-left你的li元素。

~~Buggy Demo~~ （您面临的问题）

Demo

ul li {
    background-image: url(http://png-5.findicons.com/files/icons/2222/gloss_basic/32/bullet_black.png);
    background-repeat: no-repeat;
    line-height: 30px;
    padding-left: 30px;
}

ul {
    margin: 50px;
}

Answer 2

你可以

<li><span style="top:-5px; position:relative;">Text shifted 5px upper</span></li>

Answer 3

怎么样

import { StyleSheet, View, Animated, ImageBackground, Easing, Dimensions, ScrollView } from 'react-native';

     //This is the array that i am using to initialize my values in transform for translate property
     const arr = []
     for (var i = 0; i < 6; i++) {
       arr.push(i)
     }

     export default class screen1 extends React.Component {
      constructor() {
         super();
         //these are two arrays that i am using for translate property
         this.translateInitialValueX = [];
         this.translateInitialValueY = [];
      //Here i am initializing the array indexes.
    arr.forEach((value) => {

      // this.animatedValue[value] = new Animated.Value(0)
      this.translateInitialValueX[value] = new Animated.Value(0);
      this.translateInitialValueY[value] = new Animated.Value(0);
      // console.log(this.translateInitialValueY[value]);
    })
    this.RotateValueHolder = new Animated.Value(0);
    this.scaleXY = new Animated.Value(0);
    this.opacityValue = new Animated.Value(0);
       }
      //Here i am calling my function which contain all code for animation
      componentDidMount() {
         this.StartImageRotateFunction();
      }
      //This is the function contains all the animation values.
      StartImageRotateFunction() {
        arr.forEach((value) => {
          this.translateInitialValueX[value].setValue(0);
          this.translateInitialValueY[value].setValue(0);
          // console.log(this.translateInitialValueY[value]);
       })

    this.RotateValueHolder.setValue(0);
    this.scaleXY.setValue(0);
    this.opacityValue.setValue(0);

     //Here i am using timing function for translate x.
    const translateValueX = arr.forEach((value) => {
      // console.log(this.translateInitialValueX[value]);
      return Animated.timing(this.translateInitialValueX[value], {
        toValue: 1,
        duration: 2000,
        easing: Easing.linear,
        useNativeDriver: true
      })
    })
         //Here i am using timing function for translate y.
    const translateValueY = arr.forEach((value) => {
      // console.log('second loop');
      return Animated.timing(this.translateInitialValueY[value], {
        toValue: 1,
        duration: 2000,
        easing: Easing.linear,
        useNativeDriver: true
      })
    })


     //Here i am running all animation in parallel.
    Animated.parallel([
      //this is for rotation
      Animated.timing(this.RotateValueHolder, {
        toValue: 1,
        duration: 2000,
        easing: Easing.linear,
        useNativeDriver: true
      }),
            //this is for scale
      Animated.timing(this.scaleXY, {
        toValue: 1,
        duration: 2000,
        easing: Easing.linear,
        useNativeDriver: true
      }),
      //Here i am putting values for translatex & translate y.
      translateValueX,
      translateValueY,
      //This is for opacity
      Animated.timing(this.opacityValue, {
        toValue: 1,
        duration: 2000,
        useNativeDriver: true
        // easing: Easing.bezier(100,100,200,200),
      }),
     //Here i am running it indefinitely.
    ]).start(() => this.StartImageRotateFunction());
      }

       render() {
         //Here i am picking values of device dimensions.
         const deviceWidth = Dimensions.get('window').width;
         const deviceHeight = Dimensions.get('window').height;
         const TranslateDataX = [];
         const TranslateDataY = [];

    //Here i am doing interpolation one by one for each of animations i needed
    arr.forEach((value) => {
      RotateData = this.RotateValueHolder.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg'],
      });
       // this is for translate x
      TranslateDataX[value] = this.translateInitialValueX[value].interpolate({
        inputRange: [0, 1],
        outputRange: [100, deviceWidth - 87],
      });
      //this is for translate y
      TranslateDataY[value] = this.translateInitialValueY[value].interpolate({
        inputRange: [0, 1],
        outputRange: [0, deviceHeight - 132],
      });
      //this is for scale.
      ScaleDataXY = this.scaleXY.interpolate({
        inputRange: [0, 1],
        outputRange: [0.5, 1],
      });
      //this is for opacity.
      OpacityData = this.opacityValue.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 1],
      });
    });

    //here i am repeating my animated image for tag for no of times i want to run loop
    const animations = arr.map((a, i) => {
      // console.log(TranslateDataY[a]);  
      // <Animated.Image key={i} style={{opacity: this.animatedValue[a], height: 20, width: 20, backgroundColor: 'red', marginLeft: 3, marginTop: 3}} />
      return <Animated.Image key={i}
        style={[
          {
            width: 87,
            height: 132,
            borderRadius: 10,
            opacity: OpacityData,
          },
          {
            transform:
              [
                { translateX: TranslateDataX[a] },
                { translateY: TranslateDataY[a] },
                { scale: ScaleDataXY },
                { rotate: RotateData },
              ]
          },

        ]}
        source={require('../Card.png')}
      />
    })

    return (
    //Here i am using the value of animation to render
      <ImageBackground source={require('../Background.png')} style={{ width: '100%', height: '100%' }}>
        <ScrollView>
          <View style={styles.container}>
            {animations}
          </View>
        </ScrollView>
      </ImageBackground>
    );
      }
     }
     // Here is my simple style.
     const styles = StyleSheet.create({
      container: {
         flex: 1,
       },
     });

列出垂直对齐文本中间与列表样式图像

3 个答案: