将文本与中心的图标对齐

时间:2017-08-07 16:12:53

标签: html css reactjs jsx

我有一个组件的代码

      <div>
        <icon
          HeaderText={<p className="text-center">{translations.show}</p>}
          FooterText={<p>{translations.hide}</p>}
          color={this.concept}
          className="u-pv--sm"
        >
          {getList}
        </icon>
      </div>

当我应用现有的文本中心类时,它只将文本移动到中心而不是图标。有没有什么方法可以在中心移动而不对文本中心类进行任何更改,并且可能不使用内联样式?

由于

2 个答案:

答案 0 :(得分:0)

#include <stdio.h> #include <stdlib.h> #include <math.h> //My local variables int n; int i; int input = 0; int TEAM_ID = 0, NUM_OF_GAMES = 1, WINS = 3, HOME_GAMES = 2, HOME_WINS = 4, HOME_WIN_RATIO = 6, WIN_RATIO = 5, GD = 7; int homeTeamID, awayTeamID, homeGoals, awayGoals; static const int NUM_COLUMNS = 10; static const int NUM_TEAMS = 30; double resultTable[30][10]; int BEST_WIN_DIFF = 8, BEST_WIN_OPPONENT = 9; void takeInput(); void sortData(); void printer(); //This method takes the input from the user for homeTeamID, awayTeamID,homeGoals and awayGoals void takeInput() { scanf("%d", &input); for (n = 0; n < input; n++) { scanf("%d %d %d %d", &homeTeamID, &awayTeamID, &homeGoals, &awayGoals); //calls the sortData function sortData(); } } //The table fnction which uses the resultTable variable to put the infomation in a table void sortData() { int goalDiff = homeGoals - awayGoals; //This will increment the home games,home game counter and the away game resultTable[homeTeamID][NUM_OF_GAMES]++; resultTable[homeTeamID][HOME_GAMES]++; resultTable[awayTeamID][NUM_OF_GAMES]++; //If the awaygoals is larger than the homegoals then it will set the winner in the results table if (homeGoals < awayGoals) { resultTable[awayTeamID][WINS]++; //increment away wins } //If the homegoals is larger than the awaygoals then it will set the winner in the results table else if (homeGoals > awayGoals) { resultTable[homeTeamID][WINS]++; resultTable[homeTeamID][HOME_WINS]++; //increment home wins } //The goal difference for home and away resultTable[homeTeamID][GD] = resultTable[homeTeamID][GD] + (homeGoals - awayGoals); resultTable[awayTeamID][GD] = resultTable[awayTeamID][GD] + (awayGoals - homeGoals); if (goalDiff > resultTable[homeTeamID][BEST_WIN_DIFF]) { resultTable[homeTeamID][BEST_WIN_DIFF] = goalDiff; resultTable[homeTeamID][BEST_WIN_OPPONENT] = awayTeamID; } if (-goalDiff > resultTable[awayTeamID][BEST_WIN_DIFF]) { resultTable[awayTeamID][BEST_WIN_DIFF] = -goalDiff; resultTable[awayTeamID][BEST_WIN_OPPONENT] = homeTeamID; } } //Calculates the win ratio void winRatio() { for (n = 0; n < 30; n++) { //This if determines the home win ratio if (resultTable[n][HOME_GAMES] > 0) { resultTable[n][HOME_WIN_RATIO] = resultTable[n][HOME_WINS] / resultTable[n][HOME_GAMES]; } if (resultTable[n][NUM_OF_GAMES] > 0) { resultTable[n][GD] = resultTable[n][GD] / resultTable[n][NUM_OF_GAMES]; } //This if determines the win ratio if (resultTable[n][NUM_OF_GAMES] > 0) { resultTable[n][WIN_RATIO] = resultTable[n][WINS] / resultTable[n][NUM_OF_GAMES]; } } } //This method prints out the results void printer() { for (n = 0; n < NUM_TEAMS; n++) { if (resultTable[n][NUM_OF_GAMES] != 0) { if (resultTable[n][HOME_WIN_RATIO] == -1) { printf("%d %.3f %.0f %.3f %.0f %.0f\n", n, resultTable[n][WIN_RATIO], resultTable[n][HOME_WIN_RATIO], resultTable[n][GD], resultTable[n][BEST_WIN_DIFF], resultTable[n][BEST_WIN_OPPONENT]); } else { printf("%d %.3f %.3f %.3f %.0f %.0f\n", n, resultTable[n][WIN_RATIO], resultTable[n][HOME_WIN_RATIO], resultTable[n][GD], resultTable[n][BEST_WIN_DIFF], resultTable[n][BEST_WIN_OPPONENT]); } } } } //My main function which will be used to call everyother function int main(void) { for (n = 0; n < NUM_TEAMS; n++) { for (i = 1; i < NUM_COLUMNS; i++) { resultTable[n][i] = 0; } resultTable[n][TEAM_ID] = n; resultTable[n][HOME_WIN_RATIO] = -1; resultTable[n][BEST_WIN_DIFF] = -HUGE_VAL; } int maximum, location = 1; for (n = 0; n < 30; n++) scanf("%d", &resultTable[n]); maximum = resultTable[0]; for (n = 0; n < 30; n++) { if (resultTable[n] > maximum) { maximum = resultTable[n]; location = n+1; } } printf("Maximum element is present at location %d and it's value is %d.\n", location, maximum); return 0; takeInput(); winRatio(); printer(); return EXIT_SUCCESS; } 应用于text-center而不是div时会发生什么。

我是这样的意思:

<p>

答案 1 :(得分:0)

您是否尝试过使用合理内容?

<div class="d-flex justify-content-center">
    <icon
      HeaderText={<p>{translations.show}</p>}
      FooterText={<p>{translations.hide}</p>}
      color={this.concept}
      className="u-pv--sm"
    >
      {getList}
    </icon>
  </div>

当文本中心对我不起作用时,这通常有效