I am a beginner and I'm having trouble placing text below an image, with the text centered horizontally.
I tried using background-image and managed to get the text above the image, but not below it. If I use negative percentages, the image gets cut off.
```css
a {
background: url('docs.png') no-repeat 50% 45%;
}
...
<a href="tasks.htm l">Tasks We Do</a>
```
I also tried nesting the image in an anchor tag, but I still can't center the text horizontally below the image.
```css
a {
text-decoration: none;
padding: 10px;
}
a img {
display: block;
text-align: center;
}
...
<a href="ref.html" >
<img src="docs.png" height="48" width="48" />References
</a>
```
The text-align: center doesn't work.
Can anyone help with suggestions? Thanks in advance.
I tried using background-image and managed to get the text above the image, but not below it. If I use negative percentages, the image gets cut off.
```css
a {
background: url('docs.png') no-repeat 50% 45%;
}
...
<a href="tasks.htm l">Tasks We Do</a>
```
I also tried nesting the image in an anchor tag, but I still can't center the text horizontally below the image.
```css
a {
text-decoration: none;
padding: 10px;
}
a img {
display: block;
text-align: center;
}
...
<a href="ref.html" >
<img src="docs.png" height="48" width="48" />References
</a>
```
The text-align: center doesn't work.
Can anyone help with suggestions? Thanks in advance.
Comment