Difficulties arise when trying to align text vertically between two floating images

After running the code, I noticed that the text "Text Here" is positioned at the bottom of the div instead of the top. I have attempted to adjust it using properties like vertical-align, padding, and margin-top within the .subText styling, but so far, I haven't been able to resolve the issue.

Here is the HTML and CSS code snippet: 

#footballLeft {
  float: left;
  vertical-align: middle;
}
#footballRight {
  float: right;
  vertical-align: middle;
}
.subText {
  text-align: center;
}
<div class="sect sectTwo"></div>
<div id="footballSection" class="subSection">
  <h1 class="titles">FOOTBALL</h1>
  <div class="subSubSection">
    <img src="img/teamhuddle.jpg" height="30%" width="30%" alt="Team Huddle" id="footballLeft" />
    <img src="img/womens1.jpg" alt="Womens First Team" height="30%" width="30%" id="footballRight" />
    <p class="subText">Text Here</p>
  </div>
</div>

jqueryhtmlcss

Answer №1

I tested your code and it seems to be working fine for me. If you are still experiencing issues, I recommend trying to refresh your browser or adding the following code snippet:

.subText {
    position:relative;
    left: 220px;
}

This should have the same effect as centering the element.

Answer №2

Your content is already visible at the top for me. Note: Floated elements don't get affected by vertical-align

Can we use display:inline-block instead of floats? https://jsfiddle.net/xw9fce28/

Html:

<div class="sect sectTwo"></div>
    <div id="footballSection" class="subSection">
    <h1 class="titles">FOOTBALL</h1>
    <div class="subSubSection">
    <img src="http://image.flaticon.com/teams/1-freepik.jpg" height="30%" width="30%" alt="Team Huddle" class="football" />  
    <p class="subText">Insert Text Here</p> 
    <img src="http://image.flaticon.com/teams/1-freepik.jpg" alt="Womens First Team" height="30%" width="30%" class="football" />
    </div>
</div>

CSS:

.football {
   display:inline-block;
   vertical-align: top;
}
.subText {
    display:inline-block;
}

Answer №3

The code was functioning properly, however I realized that there was a part in my CSS file that I had commented out while testing and accidentally omitted the closing bracket within the comment.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The stylesheet reference, <link rel="stylesheet" href="../css/style.css">, appears to be malfunctioning

My project structure includes css files in a folder named css and jsp files in a folder named jsp, both located inside the WEB-INF folder. I am wondering how to access the css file within a jsp file. <link rel="stylesheet" href="../css/style.css> T ...

htmlcssjsp

Update the Google Chart whenever an Ajax request is made

Upon the initial load of the chart with the default Ajax response, everything seems to be working fine. When I add console.log(chart_data), I can see both the default data and the new data after submitting. The only issue is that the chart does not redraw ...

jqueryajaxgoogle-visualization

Not all comparisons between two tables are guaranteed to be successful

Looking to compare records within two arrays and apply a style if they are equal. Here is my approach: var json = ["VIP Section","Master Section","Press Section","God Section"]; var sections = ["VIP Section","Master Section"]; if ( sections.length &g ...

javascriptjqueryarraysjson

Associate a click event to a dropdown menu element to trigger on selection

My issue involves having multiple select elements. When one of them is changed, I am trying to bind a click event only to its next element with the .btn class. Below is the code snippet illustrating my problem: <div class="whole"> <ul> ...

javascriptjquery

Using Jquery to select elements with specific text using the :

I am trying to execute 'action one' when the anchor variable includes the word 'image'. If it does not include that specific text, then 'action two' should be executed instead. var clickedImage = $('.header ul li') ...

jqueryjquery-selectorsif-statement

Prevent the <a> tag href attribute from functioning with jQuery

I came across this code snippet: <script type="text/javascript"> $(document).ready(function() { $("#thang").load("http://www.yahoo.com"); $(".SmoothLink").click( function() { $("#thang").fadeOut(); $("#thang").load( ...

javascriptjqueryajax

Please indicate the decimal separator for the Number() function

UPDATE : TITLE IS MISLEADING as testing showed that Number() returned a dot-separated number and the HTML <input type="number"/> displayed it as a comma due to locale settings. I changed to using an <input type="text"/> and filtered keydown lik ...

javascripthtmlangularjs

I am struggling to make php redirect work using onclick() function

My PHP button is not redirecting properly. Assuming the page destination is correct, is there anything else that could be causing this issue? echo "<button id=\"create\" onclick=\"location.href('/team/teams.php?op=create');&bso ...

javascriptphphtmlredirectonclick

div within a fixed width container with 100% width inside

Is there a way to ensure that div B has a width of 100% when nested inside Div A, which already has a fixed width? .divA{width:600px; margin:0 auto;} .divB{width:100%; height:20px; background-color:black} .filler{height:800px; background-color:grey} ...

jqueryhtmlcss

When hovering over items in the navigation bar, the entire bar expands seamlessly

I've spent countless hours trying to troubleshoot an issue with my dropdown menu that expands whenever I hover over it. The bar stretches out to accommodate the list of dropdown contents and then reverts back to normal when I move my cursor away. My a ...

javascripthtmljquerycsstwitter-bootstrap

The Ajax post function behaves correctly in Chrome, however, no data is being received on the server when using Internet

Looking to fetch and manipulate an image (png) created by a flash application. When a user clicks on a link, this is what happens: var dataImgBase64 = document.getElementById("flashApp").getThumbnail(); The flash app then sends me the image in base64 for ...

phpjqueryajaxpost

Building a Modal in React and Triggering it for Display, followed by Making an AJAX Request upon Submission

Check out my CodePen snippet (minus delete ajax request): http://codepen.io/martincarlin87/pen/KzPWOw I've been diving into the world of React recently, and I'm working on converting a page in my web application to utilize React instead of just ...

javascriptjqueryreactjs

Can a single character within a span be located and customized using only CSS techniques?

My inquisitive mind believes that the answer lies in the negative, however, CSS3 pseudo-selectors have the ability to work their magic almost like performing illusions on a stage. In an absurd context, I am determined to locate and style the period charac ...

csscss-selectors

Leverage Bootstrap modal to integrate with a separate form and database table

I have created a form that updates an SQL table named "invoices". Now, I am trying to implement a Bootstrap modal that will update another SQL table called "customers". The issue I am facing is that only the customer name is being saved properly. Is there ...

phpjquerymysqltwitter-bootstrap

Ajax seems to be interacting with an empty session variable

I am facing some issues with a piece of code that I've written. Here's the function in question from my PHP class: public function generalSettings(){ $totalPrice = 0; foreach($_SESSION['items'] as $key => $value){ ...

javascriptphpjqueryajaxoop

Should I include jquery.js or bootstrap.js from my own domain or stick to the original source?

I'm facing a dilemma on whether I should host jquery.js or bootstrap.js files on my own domain, or simply link directly to the download page of the providers. What is the most common practice in this scenario? My main goal is to optimize the loading s ...

jquerytwitter-bootstrapweb-standards

Browser Fails to Recognize AJAX Links as Visited

It appears that the styles for a:visited do not apply to links that are loaded via JavaScript. When a user clicks on a standard link, it shows as visited right away and even after refreshing the page. I'm uncertain if this issue is specific to jQuery ...

jquerycssajaxjquery-mobilebrowser-history

Eliminate all elements marked with a particular class when the user clicks outside of a

I am currently building upon a project that I previously started here. Essentially, what I'm doing is dynamically generating tooltip popups that appear next to a link when it is clicked. However, I now need these tooltips to close when any click even ...

javascriptjqueryhtmlcss

Issues with jquery ajax php call's functionality restrictions

I'm facing an issue with this ajax call that I copied from a working one. For some reason, it's not successful. Here is the code snippet: $.ajax({ type: "POST", url: "addTune.php", data: { database: setlist, name: tun ...

phpjqueryajax

Encountering an 'Uncaught TypeError' with Tumblr API due to undefined property 'type' not being read

I have multiple feeds on my website, each fetching posts from various tags. The first feed is functioning properly, but the 2nd and 3rd feeds are displaying the following error: Uncaught TypeError: Cannot read property 'type' of undefined All ...

javascriptjqueryajaxapitumblr