Question

这是我的问题的一个小演示...

＆＃13;

<html>

<body>
  <span style="border: 1px solid black; background-color: #CCCCFF"> My text 
      <img style="width: 1em; height: 1em; vertical-align: middle;" 
      src="http://files.softicons.com/download/social-media-icons/stucco-social-media-icons-by-bradley-siefert/png/64x64/stucco-facebook.png"> My text </span>
</body>

</html>

＆＃13;

正如您所看到的，我已将图像设为vertical-align: middle样式，但图像底部仍然放错位置。

如何让它在顶部和底部边框之间居中？

编辑：以下是此问题的完美概述：

http://phrogz.net/css/vertical-align/

Answer 1

如何让它在顶部和底部边框之间居中？

您可以尝试使用CSS flexbox。

检查以下示例：

span {
  display: inline-flex;
  align-items: center;
  padding: 5px;
}
img {
  width: 20px;
  margin: 0 5px;
}

 <span style="border: 1px solid black; background-color: #CCCCFF"> 
     My text 
   <img src="http://files.softicons.com/download/social-media-icons/stucco-social-media-icons-by-bradley-siefert/png/64x64/stucco-facebook.png"> 
   My text 
</span>

Answer 2

使用vertical-align: middle使用文本高度调整图像，正如您在屏幕转储中看到的那样，图像正好在文本的顶部/底部之间（我添加了2条绿线以显示）它）。

＆＃34;空＆＃34;文本和顶部边框之间的空格是特定字体（对于不同的字体，这是不同的）如何将字符排列在其内部高度内。

现在，出于任何理由，如果你想要打破＆＃34;打破＆＃34;这个并调整例如字体内部高度内的图像（如你的问题，在顶部/底部边框之间），你需要添加＆＃34; margin＆＃34;某处。

要让文本尽可能正常流动，您可以：

向图像元素添加一些像素边距/填充
在图像上添加一些额外的像素线和完全透明度

注意：根据您想要的完美程度，您需要计算＆＃34; margin＆＃34;在你使用的字体（它可能/可能会有所不同），字体大小，你也可能想要检查不同的操作系统。

To＆＃34;强制文字/图片＆＃34;到中心，你可以：

使用display: table（适用于IE8 / 9）
使用display: flex（不要在IE8 / 9上工作）

这是使用＆＃34;填充＆＃34;的样本。和display: table：

＆＃13;

/* padding */
span img {
  padding-bottom: 3px;
  width: 20px;
  vertical-align: middle;
}

/* display table */
div {
  display: table-cell;
  vertical-align: middle;
  padding: 5px;
}
div span {
  vertical-align: middle;
}
div img {
  width: 20px;
  vertical-align: middle;
}

＆＃13;

<span style="padding: 5px;border: 1px solid black; background-color: #CCCCFF"> This one 
          <img 
          src="http://files.softicons.com/download/social-media-icons/stucco-social-media-icons-by-bradley-siefert/png/64x64/stucco-facebook.png"> use padding </span>

<br /><br />

<div style="border: 1px solid black; background-color: #CCCCFF"> 
  <span>This one</span>
  <img src="http://files.softicons.com/download/social-media-icons/stucco-social-media-icons-by-bradley-siefert/png/64x64/stucco-facebook.png"> 
  <span>use display: table</span>
</div>

＆＃13;

Answer 3

在此JS Fiddle中，我将包裹span高度值1.3em，将其显示变为inline-block，以使高度值生效，然后放入图片的margin-top:0.1em

＆＃13;

  <span style="display:inline-block;height:1.3em; border: 1px solid black; background-color: #CCCCFF"> My text 
  <img style="width: 1em; height: 1em; margin-top:.1em;" 
  src="http://files.softicons.com/download/social-media-icons/stucco-social-media-icons-by-bradley-siefert/png/64x64/stucco-facebook.png"> My text </span>

＆＃13;

请注意，您可以将父span和img身高设置为1em，但保持display:inline-block;，img将适合范围有利可图。

Answer 4

你可以尝试这个：

#include <iostream>
#include <random>
#include <algorithm>


void drawGrid(int gridX, int gridY, char gridArray[][30]);
void hidePairs(int gridX, int gridY, char pairsArray[][30], int *numPairs);
void findPairs(int gridX, int gridY, char gridArray[][30], char pairsArray[][30], int *numPairs);
void initialiseGrid(int gridX, int gridY, char gridArray[][30], char pairsArray[][30]);

int main()
{
    int gridX, gridY, numPairs;

    //Ask user for gridX(width) and gridY(height)
    std::cout << "Please enter the width and height of the grid you want to use." << std::endl;

    bool gridIsNotEven = true;
    while (gridIsNotEven == true)
    {
        std::cin >> gridX >> gridY;
        if ((gridX*gridY) % 2 == 0)
        {
            gridIsNotEven = false;
        }
        else
        {
            std::cout << std::endl << "The grid produced by these two numbers has an odd number of spaces." << std::endl;
        }
    }
    if (gridX*gridY > 30)
    {
        std::cout << "This grid is larger than recommended." << std::endl;
    }
    gridX++;
    gridY++;
    char gridArray[30][30];
    char pairsArray[30][30];
    numPairs = ((gridX*gridY) / 2);

    //Func : initialiseGrid
    initialiseGrid(gridX, gridY, gridArray, pairsArray);

    //Func : drawGrid
    drawGrid(gridX, gridY, gridArray);

    //Func : hidePairs
    hidePairs(gridX, gridY, pairsArray, &numPairs);

    //Func : findTreasure
    findPairs(gridX, gridY, gridArray, pairsArray, &numPairs);

    system("Pause");
    return 0;
}

void drawGrid(int gridX, int gridY, char gridArray[][30])
{
    int printX, printY;

    //For(printX = 0, printX < gridX, printX++)
    for (printY = 0; printY < gridY; printY++)
    {
        //For(printY = 0, printY < gridY, printY++)
        for (printX = 0; printX < gridX; printX++)
        {
            std::cout << gridArray[printX][printY] << " ";
        }
        //END FOR

        //Print new line
        std::cout << std::endl;
    }
    //END FOR
}

void hidePairs(int gridX, int gridY, char pairsArray[][30], int *numPairs)
{
    int pairsMade, halfPair, curPairX = 0, curPairY = 0;
    char pairSymbol = '!';

    for (pairsMade = 0; pairsMade < *numPairs; pairsMade++)
    {
        halfPair = 0;
        while (halfPair < 2)
        {
            curPairX = rand() % gridX;
            curPairY = rand() % gridY;
            if (pairsArray[curPairX][curPairY] == '?')
            {
                pairsArray[curPairX][curPairY] = pairSymbol;
                halfPair++;
            }
        }
        pairSymbol++;
    }
}

void findPairs(int gridX, int gridY, char gridArray[][30], char pairsArray[][30], int *numPairs)
{
    int guess1X = 0, guess1Y = 0, guess2X, guess2Y, printChar, pairsFound = 0;
    //Display pairs
    char pairSymbol = '!';
    printChar = 0;
    std::cout << std::endl << "The following symbols will be used in the grid:" << std::endl << std::endl;

    while (printChar < *numPairs)
    {
        std::cout << pairSymbol << std::endl;
        pairSymbol++;
        printChar++;
    }
    //while ((guessX != treasureX) OR(guessY != treasureY))
    while (pairsFound != *numPairs)
    {
        //  User input : guessX and guessY
        std::cout << std::endl << "Please enter the co-ordinates of your first guess (e.g. 'X Y')" << std::endl << std::endl;
        std::cin.clear();

        std::cin >> guess1X >> guess1Y;
        gridArray[guess1X][guess1Y] = pairsArray[guess1X][guess1Y];
        drawGrid(gridX, gridY, gridArray);

        std::cout << std::endl << "Please enter the co-ordinates of your second guess (e.g. 'X Y')" << std::endl << std::endl;
        std::cin.clear();

        std::cin >> guess2X >> guess2Y;
        gridArray[guess2X][guess2Y] = pairsArray[guess2X][guess2Y];
        drawGrid(gridX, gridY, gridArray);

        if (guess1X > gridX || guess1X < 1 || guess1Y > gridY || guess1Y < 1)
        {
            std::cout << std::endl << guess1X << ", " << guess1Y << " does not lie inside the grid. Try again." << std::endl;
            continue;
        }
        else if (gridArray[guess1X][guess1Y] == gridArray[guess2X][guess2Y])
        {
            pairsFound++;
        }
        else
        {
            std::cout << std::endl << "Pair not matching" << std::endl << std::endl;
            gridArray[guess1X][guess1Y] = '?';
            gridArray[guess2X][guess2Y] = '?';
        }

        //      END IF
    }
    //Print ‘Success! etc.’
    std::cout << std::endl << "Success! You found all the pairs!" << std::endl << std::endl;
}

void initialiseGrid(int gridX, int  gridY, char gridArray[][30], char pairsArray[][30])
{
    int printX, printY;
    for (printY = 0; printY < gridY; printY++)
    {
        for (printX = 0; printX < gridX; printX++)
        {
            if ((printX == 0))
            {
                gridArray[0][printY] = printY + '0';
                pairsArray[0][printY] = printY + '0';
            }
            else if ((printY == 0))
            {
                gridArray[printX][0] = printX + '0';
                pairsArray[printX][0] = printX + '0';
            }
            else
            {
                gridArray[printX][printY] = '?';
                pairsArray[printX][printY] = '?';
            }
        }
    }
}

DEMO HERE

Answer 5

试试这个

    NSData=UIImageJPEGRepresentation(UIImage,1.0);

Answer 6

将padding-bottom提供给您的图片

<img style="padding-bottom:2px; width: 1em; height: 1em; vertical-align: middle;" src="http://files.softicons.com/download/social-media-icons/stucco-social-media-icons-by-bradley-siefert/png/64x64/stucco-facebook.png">

css：垂直对齐图像，文本在span内

6 个答案: