Is there a way to center my text on top of an image? Currently, it looks like this: http://gyazo.com/442aa9f927c1c1ee505435c2422f7322.png
But I want it to look like this: http://gyazo.com/bc3bb2d0472a1c963d4ac00081065461.png
This is the code I am currently using:
<p><img src="http://findicons.com/files/icons/941/web_design/32/page_text.png" /> Some random text</p>
If anyone could offer some guidance on how to achieve this, I would be extremely grateful.
Here's a suggestion for inserting an image inside a div with text on it:
<div class="img">
<p>your text</p>
</div>
For styling in CSS:
.img{
background: url('http://findicons.com/files/icons/941/web_design/32/page_text.png') no-repeat;
height:100%;
}
You can then adjust the positioning of your text as needed.
If you prefer to have the text centered within your element without using the image as a background, try this approach:
<div class="container">
<img src="http://findicons.com/files/icons/941/web_design/32/page_text.png" />
<span>your text</span>
<br style="clear:both;" />
</div>
CSS styling:
.container{
width:100%;
height:100px;
}
.container span{
line-height:30px;
float:left;
}
.container img{
float:left;
}
Demo: http://jsfiddle.net/5ser6/1/
<div class="item">
<img src="http://findicons.com/files/icons/941/web_design/32/page_text.png" alt="" />
<p>Text</p>
<br style="clear:both;">
</div>
* {font-family:arial}
.item img {float:left;}
.item {height:32px;float:left;}
.item p {float:left;margin:0 0 0 10px;padding:0;line-height:32px;}
If your layout has a clearfix, you don't need the clear:both, just put a clearfix on the outer div.
I have been attempting to apply module.css to one of my components by following the instructions provided in this tutorial https://nextjs.org/learn/basics/assets-metadata-css/layout-component. /*/components/Livestream/App.js*/ import styles from './A ...
I'm having an issue with this code. My objective is to create two filters for this table. The select element with id="myInput" should determine which rows appear in the table and apply the first filter. Here is the JavaScript code: function myFunctio ...
I'm currently working on customizing the styling of a menu using CSS in a project that involves the use of "react-horizontal-scrolling-menu". While I've been successful in styling the menu items with .menu-item:hover & .menu-item:active, I am ...
https://codesandbox.io/s/damp-worker-k7fj6y?file=/src/App.js Can anyone help me understand why the fourth .content <Link/> is not displaying when using the given CSS styling? Could it be a bug in the code, or am I overlooking something important? ...
Hey everyone, I'm looking to incorporate window.history.pushState into my website, but I'm unsure of how to go about it... What I'm aiming for is to have a page dashboard.php and update the URL to dashboard.php?do=edit&who=me, while loa ...
I am currently using code that displays a scroll to top button. $(window).bind("scroll", function() { if ($(this).scrollTop() > 100) { $("#totop").fadeIn(); } else { $("#totop").stop().fadeOut(); } The opacity of this div is set to 0.8. Howeve ...
I've integrated slick slider 1.8.1 into my Rails app (v.5.2.0) and I'm encountering an issue with variablewidth set to true. My expectation was to achieve a layout similar to the example shown here: https://i.sstatic.net/5QFRx.jpg However, what ...
click here to view the image I am seeking feedback on my bootstrap modal from visitors. This portfolio is hosted in HTML and I am looking for a way to gather feedback without using a database, possibly through Google Sheets. ...
I am currently working on designing a website template, and I have encountered an issue with positioning three individual columns that contain blocks of content. My objective is to have the first block of content in each column start at the top of their re ...
I am struggling with the syntax to change the color of an element in my grid when clicked. I have attempted different variations without success. Being new to JavaScript, I would appreciate some gentle guidance if the solution is obvious. JS const gri ...
I'm facing an issue with a div element that I'm manipulating using Javascript to change its position. The problem is that it's rounding off incorrectly. #hi{ background-color: blue; width: 2px; height: 10px; position: absolu ...
Currently enrolled in a web development course, I collaborated with my instructor to create a custom website. However, I am facing an issue where the header image appears shorter on the Resources page () and Contact page () compared to the Blog page (). De ...
Struggling to find a solution for my problem. I have functions that fetch data from an API and display it in a div when a user right-clicks on a context menu. The div is currently fixed to the bottom right of the page, but I want it to be draggable so user ...
I'm currently customizing a left toggler button that uses the bi-list icon. When hovered over, the icon increases by 5px, but this increase also affects the size of the button, causing responsiveness issues in my navbar. How can I dynamically adjust t ...
Lately, I have been encountering some issues with AngularJS. I have defined multiple scopes like this: app.controller('mainController', function($scope) { $scope.siteURL = "my website url"; }); When using the {{siteURL}} variable in ...
I am experimenting with changing the background-color of the card-body in bootstrap 4, but I am unsure about how to access the card-body element since each body has a different parent (I believe my understanding is correct). Can this be achieved using the ...
Hey, I'm having an issue with my fancy box and jQuery menu bar on my website. Everything is working fine in Chrome, but it's not functioning properly in IE. I tried adding the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric ...
<asp:GridView ID ="FileGrid" runat="server" AutoGenerateColumns="False" OnRowCommand="FileGrid_RowCommand"> <Columns> <asp:BoundField DataField="OriginalFileName" HeaderText="OriginalFileName" SortExpression="OriginalFileName" /& ...
I'm having trouble figuring out what's going on with my website. When I visit the home page at , everything looks fine. However, when I click on other menu items like "About Us", some of the modules (such as photo mosaic and breadcrumbs) shift sl ...
Whenever the user hovers over the image tagged with "id=dot0001", a table having id= "info0001" that includes a checkbox with id="checkbox0001" becomes visible. The user can then check the box, which replaces the image with id="dot0001" with another image ...