How can I align my text in the center of an image?
|apple| |banana|
text blah | X | | x |
| X | | x |
HTML Code:
<p style="color:white;">
©<% = year(now())%> company.CoZa |
<a href="http://www.company.com">House</a> powered by
<a href="http://www.company2.net">Company</a>
<a id="facebook" href="#"><img src="images/facebook.png"</a>
<a id="youtube" href="#"><img src="images/youtube.png"</a>
</p>
To implement this, simply include the following CSS:
img{
vertical-align:middle;
}
If you have multiple images that are displayed vertically, consider using CSS tables for alignment.
HTML:
<div class='table'>
<div class='cell'>text text text</div>
<div class='cell'>
<img src='http://developers.blog.box.com/wp-content/uploads/2013/01/thumbnail-sample.png' />
<br />
<img src='http://developers.blog.box.com/wp-content/uploads/2013/01/thumbnail-sample.png' />
</div>
</div>
CSS:
.table {
display:table;
width:100%;
}
.cell {
display:table-cell;
vertical-align:middle;
}
img {
vertical-align:middle;
}
You can achieve this effortlessly by adding the vertical-align CSS property to the image.
img{
vertical-align:middle;
}
To center content vertically, you can use the CSS property vertical-align: middle
Here is an example in HTML:
<div>
Text <img src="image.jpg" />
</div>
And the corresponding CSS:
img {
vertical-align: middle;
}
Check out the demo here: http://jsfiddle.net/abc123/
Firstly, the markup in the HTML is incorrect.
1) The image tags are not properly closed.
2) The <a> tag at the end is not closed correctly.
3) Using inline css can lead to issues with code management (separation of concerns is crucial).
As for the solution:
p {
display : table;
}
p span {
display: table-cell;
vertical-align: middle;
}
span .image {
display: table;
}
HTML :
<p>
<span>©<% = year(now())%> company.CoZa | <a href="http://www.company.com">House</a> powered by <a href="http://www.company2.net">Company</a>
</span>
<span> <a id="facebook" class="image" href="#"><img src="http://www.picturesnew.com/media/images/images-photo.jpg" style="width: 200px;"></a>
<a href="#" class="image" ><img src="http://www.picturesnew.com/media/images/images-photo.jpg" style="width: 200px;"></span>
</p>
To ensure your text and image align properly, adjust the line-height: XXpx; of the text to match the height of the image within the same element.
If you want to simplify things, consider using a table structure:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th rowspan="3" >text </th>
<th >image</th>
</tr>
<tr>
<td>image</td>
</tr>
<tr>
<td>image</td>
</tr>
</table>
Having an issue with a list inside a div. The problem arises when there is a div containing a list, which limits the visibility of items for users. If the limit is exceeded, a scroll bar appears inside the div to allow users to see more items. Additionally ...
Recently, I attempted to load a tool on my phone that I have been developing for internal use at my workplace. Upon loading the tool, I noticed some discrepancies in the display, which I had anticipated. However, one specific element seemed particularly u ...
Can anyone help me figure out how to auto-click every button in Instagram's "hide story from" settings using console? I tried the following code: for (let i = 0; i < 300; i++) { document.getElementsByClassName('wbloks_1')[i] ...
I am attempting to utilize jquery to dynamically change the background image of a webpage based on different cases in a JavaScript switch statement. I have completed three steps: 1) Included this script tag in my HTML document: <script src="http://co ...
When working with CSS, I encountered an issue with lag while loading 24 different mask images for a transition effect. To address this, I tried using a div called "preload" to cache the images and prevent lag on playback: <div class='trans' s ...
After the first click displaying "X" and then changing to "O" in my tic-tac-toe JavaScript game, subsequent clicks only show "O", failing to switch back to "X". I am currently working on creating a tic-tac-toe game using JavaScript. Upon the first click, ...
I need to choose the third option from a drop-down list that is enclosed in a div element. However, when I try to retrieve the items in the drop-down using Selenium, the size of the drop-down list is only showing as 1 even though there are actually 10 it ...
As someone new to JavaScript, I am trying to figure out how to populate a HTML table with geojson entries like "ename" etc. Here is my current code: <table id="jsoncontent"></table> <script type="text/javascript"> window.onload = fu ...
Just to clarify, I'm not looking for someone to solve this problem for me. I've been trying to figure it out on my own but haven't had any luck. I've searched for similar solutions online, but none of them have worked for what I need sp ...
As my form continued to submit and refresh, I consulted a helpful resource on Stack Overflow titled How to prevent page from reloading after form submit - JQuery in search of a solution. Interestingly, the difference between the provided answer and my situ ...
I am facing an issue with my create-react-app. Everything works perfectly fine when I run it using npm run start. However, after building it with npm run build, some CSS appears to be missing from the app. Upon investigation, I discovered that the file bu ...
I have come across various techniques for creating a simple fixed-width single-column layout using CSS. The method discussed here caught my attention due to its minimal code and compatibility with all the browsers I tested. #container { margin: 0 auto; ...
Currently, I am working on a form utilizing react-jsonschema-form. However, I would like to further enhance the appearance of my application (including the form) by incorporating Material-UI. I am encountering difficulties integrating both frameworks toget ...
I have implemented inline editing using jQuery Datatables. Currently, I am trying to display a green checkmark when a record gets updated. Below is the ajax call that populates the table: $.ajax({ url: 'api/massEditorSummary.php', type: &ap ...
I'm struggling to modify the default purple color of the dropdown arrow in an mdc-select: https://i.sstatic.net/DdDEv.png None of the sass mixins seem to be effective in making the change. Any suggestions on how this can be achieved? Here are my a ...
Is it feasible to dynamically set the ALT and title attributes of an image element to match the file name? It seems like this could potentially be achieved using the CSS content property, although I am not very familiar with the process. For example: < ...
I am attempting to use AJAX to submit an HTML form. Here is my HTML: <form class="lyrics"> <input type="text" value="" id="song" name="song"> <button type="submit" class="btn btn-info lirik">lyrics</button> </form> ...
My directive is data-driven and generates radio buttons that have been styled to look like buttons. While everything is functioning correctly, I would like to be able to specify an image URL for each item and dynamically display the corresponding image in ...
Looking to pass an array to my view that includes headings and corresponding content lists. The structure of my array is as follows: Array ( [0] => Array ( [trimester] => Trimester1 [subject] => ABC ) ...
I've been experimenting with replicating the basic framework to learn more about responsive web design using bootstrap. However, I've only been able to get certain parts to function correctly. For instance, I can use the "btn" class without any i ...