Question

我需要帮助才能使锚内的内容垂直对齐。我使用字体真棒图标和锚标记内的文本。我想垂直和放置图标和文字。在中心水平对齐。我能够使水平对齐工作，但不能垂直对齐。不确定我错过了什么

#include <unistd.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>

char **split(char *s, int *arsiz);

int main(int argc, char* argv[])
{
  int x;
  int arrsz;
  char str[]="aaa:bbb:ccc";
  char **arr;

  arrsz = 0;
  arr = split(str,&arrsz);

  for(x=0;x<arrsz;x++) {
    printf("%s\n",arr[x]);
  }

  return 0;
}

/***********************************/
char **split(char *str, int *sizrtn)
{
  int arrsz=0;
  const char *delim = ":";
  char *tok;
  char **arr = NULL;

  tok = strtok(str,delim);
  while (tok != NULL) {
    arrsz++;
    arr = realloc(arr,sizeof(char *) * (arrsz + 1));

    arr[arrsz - 1] = strdup(tok);

    tok = strtok(NULL,delim);
  }

  if (arr == NULL)
    arr = malloc(sizeof(*arr));

  arr[arrsz] = NULL;

  *sizrtn = arrsz;

  return arr;
}

.my-tile {
    height: 90px;
    margin-left: 0.5%;
    margin-right: 0.5%;
    float: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    /*display: table;*/
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;    
    position: relative;    
    align-items: center;
    background: linear-gradient(#af4b17, #e57234); /* Standard syntax */
    background: -moz-linear-gradient(#af4b17, #e57234 35%, #e57234);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #af4b17),color-stop(.35, #e57234),color-stop(1, #e57234));
    border: 1px solid #af4b17;
    text-align: center;
    justify-content: center;
    vertical-align:middle;
}

    .my-tile > a {
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        /*padding-bottom: 10px;*/
        text-decoration: none;
        position: relative;           
        vertical-align:middle;        
    }

        .my-tile > a .link-icon {
            color: white !important;
            font-size: 30px !important;            
            height: 1em;
            margin: 0 auto 5px;            
            width: 1em;            
            display: block;
            
        }        

.my-tile-half {
    width: 49%;
}

Answer 1

您需要为锚标记<a>指定高度。在您的情况下，您需要height: 100%

<强> CSS

.my-tile > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; 
    /** Rest of your rules */    
}

<小时/> 此外，我认为您应该删除vertical-align: middle，因为这不会影响他们的孩子。

在中心锚定标记内部对齐内容

1 个答案: