Question

我一直试图在图片旁边添加一些文字，但我无法让它正常工作，似乎＆＃34;面孔＆＃34;风格不允许我，你知道什么是错的吗？：）

我有：

<div class="teams-body" id="teams-body">
<div class="faces">
<img src="http://assets.lolesports.com/player/lourlo-iatd1lge.png">
Lorem ipsumdolor sit amet consectetur adipiscing elit 
</div>
<div class="faces"> 
<img src="http://assets.lolesports.com/player/iwdominate-4kjr1rn6.png">
Lorem ipsumdolor sit amet consectetur adipiscing elit 
</div>
<div class="faces">
<img src="http://assets.lolesports.com/player/fenix-6cyhqz7w.png">
Lorem ipsumdolor sit amet consectetur adipiscing elit
</div>
</div>

CSS：

.faces {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    z-index: -1;
}


.faces img {
    display: inline;
    height: 100%;
    width: 100%;
    background-color: #79b9e1;
    z-index: -1;
}

目前看起来像：

[IMG]

[IMG]

[IMG]

我希望它看起来像：

[img] Lorem ipsumdolor sit amet consectetur adipiscing elit Lorem ipsumdolor sit amet consectetur adipiscing elit
[img] Lorem ipsumdolor sit amet consectetur adipiscing elit Lorem ipsumdolor sit amet consectetur adipiscing elit

Answer 1

喜欢这样吗？

如果您希望图片/文字垂直居中，请将#include "stdafx.h" #include <stdio.h> #include <string.h> #include <stdlib.h> #include <time.h> int amount; char **longestWords; char exampleLetters[] = "fdasjfsf"; //These are a group of example letters that will be randomly generated in a previous part of the program char *fileName = "D:\\webster.txt"; //Dictionary file int initialiseWords(int num); //This was to set my pointers to NULL if I was to use malloc int copyWords(int val); int main() //This function detects how many words there are of each length (maximum length is 8) { int i, j, k; long int n[8] = {0}; char line[15]; FILE *fp = fopen(fileName, "r"); if (fp == NULL) { printf("Error opening file!\n"); } else { while (fgets(line, sizeof(line), fp)) { k = 0; for (i = 0; i < 8; i++) { for (j = k; j < 8; j++) { if (line[i] == exampleLetters[j]) { k++; break; } } } for (i = 8; i > 0; i--) { if (k == i) { n[i-1]++; break; } //These values are incremented everytime a word of that amount of letters is found i.e. n1++ when a one letter word is found } } } fclose(fp); for (i = 7; i >= 0; i--) { if (n[i] != 0) { initialiseWords(n[i]); copyWords(i); amount = n[i]; break; } } for (i = 0; i < 8; i++) { printf("%li ", n[i]); //This is irrelevant but just to display the amount of each number of words } for (i = 0; i < amount; i++) { printf("%s\n", longestWords[i]); } return 0; } int initialiseWords(int num) { int i; longestWords = (char**)malloc(num * sizeof(char*)); for (i = 0; i < num; i++) { longestWords[i] = (char*)malloc((9)* sizeof(char)); } return 1; } int copyWords(int val) //This function copies of over the words that have the maximum length { int i, j, k, l; char line[15]; FILE *fp = fopen(fileName, "r"); if (fp == NULL) { printf("Error opening file!\n"); } else { l = 0; while (fgets(line, sizeof(line), fp)) { k = 0; for (i = 0; i < 8; i++) { for (j = k; j < 8; j++) { if (line[i] == exampleLetters[j]) { k++; break; } } } if (k == val + 1) { strcpy(longestWords[l], line); //MY PROBLEM!!! l++; } } } fclose(fp); return 1; }添加到vertical-align: middle;规则

＆＃13;

.faces img

＆＃13;

.faces {
  height: 100px;
  position: relative;
}


.faces img {
  height: 100%;
  width: auto;
  background-color: #79b9e1;
  border-radius: 50%;
}

＆＃13;

Answer 2

使用此代码

.faces img {
    display: inline;
    background-color: #79b9e1;
    z-index: -1;
  width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    z-index: -1;
  vertical-align:middle
  
}

<div class="teams-body" id="teams-body">
<div class="faces">
<img src="http://assets.lolesports.com/player/lourlo-iatd1lge.png">
Lorem ipsumdolor sit amet consectetur adipiscing elit 
</div>
<div class="faces"> 
<img src="http://assets.lolesports.com/player/iwdominate-4kjr1rn6.png">
Lorem ipsumdolor sit amet consectetur adipiscing elit 
</div>
<div class="faces">
<img src="http://assets.lolesports.com/player/fenix-6cyhqz7w.png">
Lorem ipsumdolor sit amet consectetur adipiscing elit
</div>
</div>

无法在div旁边添加文字

2 个答案: